CSS中float为什么要clear,Clear Float

众所周知，平时在写HTML代码时，难免少不了使用Float样式，这样一来，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说，假如你在写CODE时，其中div.A(这个就是说页面中有一个div，并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例)，并且此时div.B和div.C进行浮动，而div.D不进行任何浮动，此时你可以看到父元素div.A高度仅靠div.D来撑开其高度，如果您将div.A所有子元素进行浮动，当你没有清除内部浮动时，此时会导致浮动的父元素div.A无法自动撑开本身的高度。也就是说：当一个元素是浮动的，如果没有关闭浮动时，其父元素不会包含这个浮动元素，因为此时浮动元素从文档流中脱离。下面我们先来看看这两种现像的实例：

HTML Code:

float left

float right

not float

给上面的加上一些基本的样式：

.demo {

width: 300px;

border: 1px solid red;

}

.demoFloat {

background: green;

margin: 0;

}

.demoC {

background: orange;

}

.demoD {

background: lime;

border: 2px solid blue;

}

下面先来看第一种，div.B和div.C进行浮动，而div.D不进行浮动

.demoB {

float: left;

}

.demoC {

float: right;

}

效果：