? ? ? ? ? CSS定位機制分為文檔流，浮動和定位。如果不對元素進行浮動處理的話，元素應該按照文檔流排列，否則元素就會脫離文檔流，漂浮在文檔流之上。
本文以div布局為例闡述浮動對元素定位的影響。
div是塊級元素，在頁面中獨占一行，自上而下排列，也就是所謂的文檔流。
假設上圖的B左浮動，那么它將脫離標準流，但A,C,D仍然在標準流中，所以C,D會自動向上移動，占據B的位置，重新組成一個流。
若讓B右浮動，可以清晰的看到A,C,D組成新的文檔流。
當同時對B，C設置浮動后，C會跟隨在B之后
在以上的例子中B都是浮動的，但并沒有跟隨在A之后，因為A并沒有設置浮動。因此我們可以得出個結論：
假如某個div是浮動的，如果它的上一元素也是浮動的，那么這個div會跟隨在上一個元素的后邊（如果放不下才會被擠到下一行），如果上一元素是標準流中的元素，那么這個相對垂直的位置不會改變，也就是這個元素總是跟上個元素的底部對齊。
接著我把B,C,D都設成左浮動，效果如下圖
先從D開始分析，它發(fā)現上邊的元素B是浮動的，所以D會跟隨在C之后；C發(fā)現上邊的元素B也是浮動的，所以C會跟隨在B之后；而B發(fā)現上邊的元素A是標準流中的元素，因此B的相對垂直位置不變，頂部仍然和A元素的底部對齊。由于是左浮動，左邊靠近頁面邊緣，左邊是前，因此B在最左邊。
通過上面的例子可以看出：元素浮動之前，也就是在標準流中，是豎向排列的，而浮動之后可以理解為橫向排列。
清除浮動可以理解為打破橫向排列
清除浮動的關鍵字是clear，官方定義如下：
語法：
clear : none | left | right | both
取值：
none? :? 默認值。允許兩邊都可以有浮動對象
left?? :? 不允許左邊有浮動對象
right? :? 不允許右邊有浮動對象
both? :? 不允許有浮動對象
A,B兩個div，將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;}
