浮动

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。 

float：left | right | none | inherit         

举个例子:

当框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。 

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，框2填补了它的位置且被覆盖，使框 2 从视图中消失。 

如果把所有三个框都向左浮动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

浮动例子

当框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，框2填补了它的位置且被覆盖，使框 2 从视图中消失。

如果把所有三个框都向左浮动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

浮动的特性

脱离文档：元素设置为浮动后脱离文档流，并不占据空间，而此浮动元素在文档流空出的位置，由后续的非浮动元素填充，块级元素直接填充上去，内联元素则有空隙就插入。

浮动可以内联排列：浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，类似于inline-block属性的效果。

父元素高度坍塌：浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

清除浮动

清除浮动的概念

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

举个栗子：

html标签

css样式

示例效果

上面是未设置浮动时的效果，下面我们给容器里面的子元素设置向左浮动：

添加浮动样式

浮动后的效果

我们可以看到，子元素设置浮动后父元素只剩下了重合后的边框，这是因为元素脱离了文档流，不能撑开父元素，所以父元素的高度坍塌了，而子元素也溢出到容器外面，这就是浮动溢出现象。要消除这个现象就得清除浮动。

清除浮动的方法

方法一：添加带clear属性的空元素

clear 属性规定元素的哪一侧不允许其他浮动元素。

clear ：left|right|both|none|inherit

我们给浮动元素后面添加一个空元素

添加空元素

给空元素设置clear属性

.none{clear:both;} 

效果示例

原理是设置clear后，父容器必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了

另外，如果浮动元素后面存在着不浮动的块元素，那么直接给后者添加clear: both属性即可，不必添加空元素多此一举。

方法二：after伪元素

after伪元素可以在父容器的尾部自动创建一个子元素，也就是说我们不必修改html，可以直接通过css来添加新元素，达到跟上一种方法同样的效果。

css样式

content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用，本例content: ""表示给父元素结尾放了一个空白字符。

after添加的内容默认是inline元素，但是行内元素会找空隙插入浮动元素，依然撑不起父容器高度，所以我们需要把插入的元素设置成块元素block。

height: 0是让这个这个空白字符不显示出来。

由于IE6不支持after，我们添加一条IE6的独有命令"zoom:1"就行了，这条命令的作用是触发父元素的"hasLayout"属性（即令hasLayout的值为true），让父元素拥有自己的布局，IE6会读取这条命令，其他浏览器则会直接忽略它。 （haslayout为true时，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容，例如浮动，而zoom:1是最常用，最安全，成本最少的触发hasLayout的方式。）

方法三：父元素设置overflow: auto/hidden

给浮动元素的父元素添加overflow: auto或者overflow: hidden属性之后会自动计算超出的大小，所以父容器会自动撑开自己把所有的子元素放进去，浮动元素也回到了容器层，达到了清理浮动的效果。但是如果子元素的大小超过父容器的大小，就会出现显示问题,不推荐使用。

css样式

方法四：父元素设置浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，也容易出现新的浮动问题，不推荐使用。

css样式

方法五：父元素设置display:table

将父容器变成表格可以清除浮动，但是非表格内容用table来装，不符合标签语义化要求，还可能会出现未知问题，故不推荐使用。

css样式

float小结：

对于浮动，需要了解的是：

*浮动会将元素从文档流中删除，他的空间会被其它元素补上。

*浮动的参数物是父元素，是在父元素这个容器中飘。

*为了清除浮动造成的对浮动元素之后元素的影响，我们在浮动元素之后加一个div，并将这个div的clear设置为both。

*如果两个元素都设置了浮动，则两个元素并不会重叠，第一个元素占据一定空间，第二个元素紧跟其后。如果不想让第二个元素紧跟其后，可以对第二个浮动的元素使用clear。