float浮動和清除float浮動
1.Float的介紹
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄(塌陷的產生)。
註：假如在一行之上只有極少的空間可供浮動元素，那麽這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
浮動模型的基本知識：浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣.《CSS Mastery》一書中講的特別有趣和好理解，我簡單的用幾個demo介紹一下。
a.不浮動的時候 <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> </div>
b.當red部分右浮動：<div style="border: solid 5px #09F; width:300px;"> 父元素內容 <div style="height: 100px; width: 100px; float:right;"> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px;"> </div>
c.當red部分左浮動：<div style="border: solid 5px #09F; width:300px;">
父元素內容
<div style="height: 100px; width: 100px; float:left;"></div>
<div style="height: 100px; width: 100px; "></div>
<div style="height: 100px; width: 100px; "></div>
</div>
此時的green和yellow部分和”父元素內容”是在普通文檔流中，red部分覆蓋了文檔流中的green部分。
d.所有的向左浮動,父元素的高度為0<div style="border: solid 5px #09F; width:300px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
當所有的元素都向左或者是向右浮動（此例子效果相同如上圖），父元素未浮動，此時父元素就會出現塌陷，即父元素的高度為0px。
如果父包含塊太窄而無法容納水平排列的多個浮動元素時,那麽其它浮動塊兒向下移動,,直至找到有足夠的寬度容納浮動塊,如果浮動元素的高度不同,那麽在向下移動的時候可能會被卡住。
e.當父元素的寬度不足以容納所有的浮動元素時，浮動塊就會下移，如下圖：<div style="border: solid 5px #09F; width:240px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
</div>
f.當高度不等時會出現類似“卡住了”現象，如下圖<div style="border: solid 5px #09F; width:240px;">
<div style="height: 110px; width: 100px; float:left;"> </div>
<div style="height: 100px; width: 100px; float:left;"> </div>
<div style="height: 80px; width: 100px; float:left;"> </div>
</div>
2. 清除浮動【float】
在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。如上一篇中講到的所有元素左浮動時，元素塌陷即父元素高度為0px；
清除浮動前：
方法一：使用帶clear屬性的空元素清除
<style> .clear { clear: both; } </style> <body> <div style="border: solid 5px #09F; width:300px;"> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div class="clear"></div> </div> </body>
清除浮動後：
優點：簡單，代碼少，瀏覽器兼容性好。
缺點：需要添加大量無語義的html元素，代碼不夠優雅，後期不容易維護。
方法二：使用CSS的overflow屬性
給未浮動的父元素設置 overflow: auto;或 overflow: hidden;屬性。另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設置容器寬高或設置 zoom:1。
<div style="border: solid 5px #09F; width:300px; overflow: auto;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
方法三：給浮動的元素的容器添加浮動
-
<div style="border: solid 5px #09F; width:300px; float:left;"> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> </div>缺點：給浮動元素的容器也添加上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用，當父元素是body時設置無效。
方法四：使用CSS的:after偽元素
結合 :after 偽元素（註意這不是偽類，而是偽元素，代表一個元素之後最近的元素）和 IEhack ，可以完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout。
給浮動元素的容器添加一個clearfix的class，然後給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。
<style> .clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; /*兼容IE6 IE7*/ } </style> <body> <div class="clearfix" style="border: solid 5px #09F; width:300px; "> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> </div> </body>
通過CSS偽元素在容器的內部元素最後添加了一個看不見的空格”020”或點”.”，並且賦予clear屬性來清除浮動。需要註意的是為了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。
方法五：使用鄰接元素處理
給浮動元素後面的元素添加clear屬性，此元素與浮動元素是同一級的元素。
清除前：
<div style="border: solid 5px #09F; width:500px; "> <div style="height: 100px; width: 100px; float:left;"></div> <div style="height: 100px; width: 100px; float:left;"></div> <div style="height: 100px; width: 100px; float:left;"></div> <div style="clear: both; background: #800080;">同級元素</div> </div>
清除後：
float浮動和清除float浮動