CSS浮动学习小记

          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重新置于文档流中