那些年我們一起清除的浮動

方法一：:after


.main：warp自己閉合浮動了，所以footer不用再清除浮動了(float:left)
.side：我也浮動了(float:left)

為了建立跨瀏覽器相容的同樣的盒模型布局，我們可以把原來的清除浮動的方法改良一下，採用偽類:before 和 :after： .clearfix:before, .clearfix:after .clearfix:after

.clearfix /* ie < 8 */

需要注意的是 :after是偽元素（pseudo-element），不是偽類（某些css手冊裡面稱之為「偽物件」），很多閉合浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。

由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。

該方法源自於:how to clear floats without structural markup

原文全部**如下:

鑑於 ie/mac的市場占有率極低,我們直接忽略掉,最後精簡的**如下:

.clearfix:after

.clearfix

優雅的 demo

優點：結構和語義化完全正確,**量居中

缺點：復用方式不當會造成**量增加

方法二：新增額外標籤

.main .side

優點：通俗易懂，容易掌握

缺點：可以想象通過此方法，會新增多少無意義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢，這是堅決不能忍受的，所以你看了這篇文章之後還是建議不要用了吧。

方法三：使用br標籤和其自身的 html屬性

.main .side

優點：比空標籤方式語義稍強，**量較少

缺點：同樣有違結構與表現的分離，不推薦使用

方法四：給父元素設定overflow：hidden

.main .side

優點：不存在結構和語義化問題，**量極少

缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素；04年popo就發現overflow:hidden會導致中鍵失效，這是我作為乙個多標籤瀏覽控所不能接受的。所以還是不要使用了

方法五：給父元素設定display：table

.main .side

優點：結構語義化完全正確，**量極少

缺點：盒模型屬性已經改變，由此造成的一系列問題，得不償失，不推薦使用

4)父元素設定 overflow：auto 屬性

同樣ie6需要觸發haslayout，演示和3差不多

優點：不存在結構和語義化問題，**量極少

缺點：多個巢狀後，firefox某些情況會造成內容全選；ie中 mouseover 造成寬度改變時會出現最外層模組有滾動條等，firefox早期版本會無故產生focus等, 請看嗷嗷的demo,不要使用

5）父元素也設定浮動

優點：不存在結構和語義化問題，**量極少

缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用