清除浮動的幾種方法

標準流：盒子會各佔整行位置。子盒子如果標準流，父盒子雖然沒有高度，可是會撐開父盒子高度。  

浮動：盒子浮了起來，不會佔據原來的位置，若父盒子沒有定義高度，則不會撐開父盒子，父盒 子高度爲0。（浮動可讓多個塊級元素在一行顯示，且塊與塊之間沒有空隙，但要注意給父盒子清除浮動，不然父盒子不會被撐開）。

爲何要清除浮動呢？清除浮動的本質是什麼？

　　清除浮動主要是爲了解決父級元素由於子級浮動引發的內部高度爲0的問題。

清除浮動的方法：

1. 額外標籤法：給誰清除浮動，就在其後額外添加一個空白標籤 。
優勢：通俗易懂，書寫方便。（不推薦使用）
缺點：添加許多無心義的標籤，結構化比較差。

給元素small清除浮動（在small後添加一個空白標籤clear(類名能夠隨意），設置clear:both;便可）

2. 父級添加overflow方法：能夠經過觸發BFC的方式，實現清楚浮動效果。
優勢：代碼簡潔（慎重使用，若該父盒子裏還有position定位會引發麻煩）
缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

注意：別加錯位置，是給父親加（並非全部的浮動都須要清除，誰影響佈局，才清除誰。）

3. 使用after僞元素清除浮動：：after方式爲空元素的升級版，好處是不用單獨加標籤了。（較經常使用）
優勢：符合閉合浮動思想，結構語義化正確
缺點：因爲IE6-7不支持：after，使用zoom：1，觸發hasLayout。

注意：這個也是給父親添加 clearfix

4. 使用before和after雙僞元素清除浮動：（較經常使用）

注意：是給父親添加clearfix