1）新增額外標籤
.main
.side
.footer
優點：通俗易懂，容易掌握
缺點：可以想象通過此方法，會新增多少無意義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢，這是堅決不能忍受的，所以你看了這篇文章之後還是建議不要用了吧。
2）使用 br標籤和其自身的 html屬性
.main
.side
.footer
缺點：同樣有違結構與表現的分離，不推薦使用
3)父元素設定 overflow：hidden
.main
.side
.footer
優點：不存在結構和語義化問題，**量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素；04年popo就發現overflow:hidden會導致中鍵失效，這是我作為乙個多標籤瀏覽控所不能接受的。所以還是不要使用了
4)父元素設定 overflow：auto 屬性
優點：不存在結構和語義化問題，**量極少
缺點：多個巢狀後，firefox某些情況會造成內容全選；ie中 mouseover 造成寬度改變時會出現最外層模組有滾動條等，firefox早期版本會無故產生focus等, 請看 嗷嗷的demo,不要使用
5）父元素也設定浮動
優點：不存在結構和語義化問題，**量極少
缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用
6）父元素設定display:table
優雅的 demo
優點：結構語義化完全正確，**量極少
缺點：盒模型屬性已經改變，由此造成的一系列問題，得不償失，不推薦使用
7）使用:after 偽元素
需要注意的是 :after是偽元素（pseudo-element），不是偽類（某些css手冊裡面稱之為「偽物件」），很多閉合浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。
由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
該方法源自於:how to clear floats without structural markup
原文全部**如下:
鑑於 ie/mac的市場占有率極低,我們直接忽略掉,最後精簡的**如下:.clearfix:after
.clearfix
優點：結構和語義化完全正確,**量居中
缺點：復用方式不當會造成**量增加
清除浮動的幾種方法
1.浮動元素下加空div 為了統一樣式，我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動，可以不用對父級設定高度 也無需技術父級高...
清除浮動的幾種方法
當元素浮動時，他將不再處於普通文件流中，相當於浮在文件之上，不佔據空間，但是會縮短行寬，產生文字環繞的效果。浮動帶來的影響 1，父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流，不佔位，而後面的元素未脫離文件流導致後面的元...
清除浮動的幾種方法
style float left 為了解決container容器高度塌陷問題，我們必須清除浮動 第一種方法 在container元素後加上乙個空的div標籤，然後給設定乙個clear both的樣式 第二種方法 給container容器新增 overflow auto hidden樣式 第三張方法 ...