CSS定位机制分为文档流，浮动和定位。如果不对元素进行浮动处理的话，元素应该按照文档流排列，否则元素就会脱离文档流，漂浮在文档流之上。
本文以div布局为例阐述浮动对元素定位的影响。
div是块级元素，在页面中独占一行，自上而下排列，也就是所谓的文档流。
A,B,C,D四个div上下依次排列
假设上图的B左浮动，那么它将脱离标准流，但A,C,D仍然在标准流中，所以C,D会自动向上移动，占据B的位置，重新组成一个流。
C占据了B的位置，A,C,D重新组成文档流
若让B右浮动，可以清晰的看到A,C,D组成新的文档流。
清晰看到A,C,D组成的文档流
当同时对B，C设置浮动后，C会跟随在B之后
A,D重新组成文档流，D被B覆盖（加深的B部分为D）
在以上的例子中B都是浮动的，但并没有跟随在A之后，因为A并没有设置浮动。因此我们可以得出个结论：
假如某个div是浮动的，如果它的上一元素也是浮动的，那么这个div会跟随在上一个元素的后边（如果放不下才会被挤到下一行），如果上一元素是标准流中的元素，那么这个相对垂直的位置不会改变，也就是这个元素总是跟上个元素的底部对齐。
接着我把B,C,D都设成左浮动，效果如下图
先从D开始分析，它发现上边的元素B是浮动的，所以D会跟随在C之后；C发现上边的元素B也是浮动的，所以C会跟随在B之后；而B发现上边的元素A是标准流中的元素，因此B的相对垂直位置不变，顶部仍然和A元素的底部对齐。由于是左浮动，左边靠近页面边缘，左边是前，因此B在最左边。
通过上面的例子可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
清除浮动可以理解为打破横向排列
清除浮动的关键字是clear，官方定义如下：
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
A,B两个div，将A,B均设为左浮动，A,B都将脱离文档流，此时要将A,B都置于文档流中有三种方法清除浮动。
A,B脱离文档流
清除浮动的三种方法：
方法1、 在浮动元素的最后面添加一个新元素，应用clear:both.（clear:left是清除左浮动，clear:right是清除有浮动。为了方便，一般我们都是使用clear:both）
<div class="clear" style="clear:both"></div>
方法2、浮动元素的父元素使用overflow：auto；
.parent{ overflow: auto;}
方法3、使用伪类
<div class="parent clearfix">
.clearfix:after{ content="";display:block;clear:both;zoom=1;}
三种方法都可以将A,B重新置于文档流中
网友评论