? ? ? ? ? CSS定位機制分為文檔流鳄虱，浮動和定位。如果不對元素進行浮動處理的話凰浮，元素應(yīng)該按照文檔流排列我抠，否則元素就會脫離文檔流，漂浮在文檔流之上袜茧。
本文以div布局為例闡述浮動對元素定位的影響菜拓。
div是塊級元素，在頁面中獨占一行笛厦，自上而下排列纳鼎，也就是所謂的文檔流。
假設(shè)上圖的B左浮動裳凸，那么它將脫離標(biāo)準(zhǔn)流贱鄙，但A,C,D仍然在標(biāo)準(zhǔn)流中，所以C,D會自動向上移動姨谷，占據(jù)B的位置逗宁，重新組成一個流。
若讓B右浮動瞎颗，可以清晰的看到A,C,D組成新的文檔流件甥。
當(dāng)同時對B，C設(shè)置浮動后言缤，C會跟隨在B之后
在以上的例子中B都是浮動的禁灼，但并沒有跟隨在A之后管挟，因為A并沒有設(shè)置浮動。因此我們可以得出個結(jié)論：
假如某個div是浮動的弄捕，如果它的上一元素也是浮動的僻孝，那么這個div會跟隨在上一個元素的后邊（如果放不下才會被擠到下一行），如果上一元素是標(biāo)準(zhǔn)流中的元素守谓，那么這個相對垂直的位置不會改變穿铆，也就是這個元素總是跟上個元素的底部對齊。
接著我把B,C,D都設(shè)成左浮動斋荞，效果如下圖
先從D開始分析荞雏，它發(fā)現(xiàn)上邊的元素B是浮動的，所以D會跟隨在C之后平酿；C發(fā)現(xiàn)上邊的元素B也是浮動的凤优，所以C會跟隨在B之后；而B發(fā)現(xiàn)上邊的元素A是標(biāo)準(zhǔn)流中的元素蜈彼，因此B的相對垂直位置不變筑辨，頂部仍然和A元素的底部對齊。由于是左浮動幸逆，左邊靠近頁面邊緣棍辕，左邊是前，因此B在最左邊还绘。
通過上面的例子可以看出：元素浮動之前楚昭，也就是在標(biāo)準(zhǔn)流中，是豎向排列的拍顷，而浮動之后可以理解為橫向排列哪替。
清除浮動可以理解為打破橫向排列
清除浮動的關(guān)鍵字是clear，官方定義如下：
語法：
clear : none | left | right | both
取值：
none? :? 默認(rèn)值菇怀。允許兩邊都可以有浮動對象
left?? :? 不允許左邊有浮動對象
right? :? 不允許右邊有浮動對象
both? :? 不允許有浮動對象
A,B兩個div凭舶，將A,B均設(shè)為左浮動，A,B都將脫離文檔流爱沟，此時要將A,B都置于文檔流中有三種方法清除浮動帅霜。
清除浮動的三種方法：
方法1、 在浮動元素的最后面添加一個新元素呼伸，應(yīng)用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;}
