先介紹兩個比較簡單，但是不常用的解決方法：
為父元素新增overflow:hidden
浮動父元素
這兩個方法比較簡單，在這裡也就不再演示了，大家有興趣的可以自己去試試。
第三種方法也不是很常用，但是大家要知道clear:both這個東西。通過在所有浮動元素下方新增乙個clear:both的元素，可以消除float的破壞性。
接下來的第四種方法是大家最需要掌握的，也是我推薦的，也是bootstrap正在用的——clearfix——不知道的同學一定要去搜一下，要不然就太low了！
上圖中，我們定義乙個.clearfix類，然後對float元素的父元素應用這一樣式即可，非常簡單吧？注意，你可能會搜出不同版本的clearfix，有的**比上圖中的**多，你不用理會它，就按照我的貼圖的**寫就行。
究其原理，其實就是通過偽元素選擇器，在div後面增加了乙個clear:both的元素，跟第三種方法是乙個道理。
《上篇》中提到，我們使用float做網頁布局，是一種誤解和「誤用」。估計大多數人誤解了float的原本設計初衷，但是這裡的「誤用」是要加引號的，因為這是一種無心插柳的應用。即，用float做網頁布局是很合情合理的，鼓勵同志們繼續使用。
第一，三列布局
的主頁就是經典的三列布局，很明顯的左、中、右。
對於這種布局，我給出的布局方案是：
第二，兩列布局
以一篇文章的鏈結為例，它分為左、右結構
對於這種布局的格式，我的設計方案是：
如果您熟悉並使用bootstrap，那麼您將不必自己去操心網頁布局，因為bootstrap已經把網頁分成了12列，您可以隨意設定多列布局，非常方便。這就是bootstrap的柵格系統。此處不會詳解柵格系統，就是簡單看看柵格系統的實現，它是用float實現的。
通過瀏覽器監控每個單元格的css樣式，可以發現，單元格通過百分比設定了寬度，通過float:left設定了浮動。
對於父元素的清除浮動，bootstrap使用的就是《上篇》中說的clearfix，大家可以自行檢測一下試試。
多看看經典軟體的原始碼是學習的乙個捷徑，學習css可以看看bootstrap，學習js可以看看jquery……
float內容非常多，有的css書籍中，也很難全面的講解float這一知識點的全部內容。這就需要自己去多多看書，多多實踐，多多看經典系統的原始碼，才能做到融會貫通，舉一反十。
大家共勉吧。
源引：
css知多少（8） float上篇
對於我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人 你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那麼一點知識，但卻駕馭不了它各種奇怪的現象。這就是我們又愛又恨的 float。所以，系統的學一學float是非常非常重要的。除了看書和看部落格文章之外，我推薦大...
css知多少（8） float上篇
對於我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人 你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那麼一點知識，但卻駕馭不了它各種奇怪的現象。這就是我們又愛又恨的 float。所以，系統的學一學float是非常非常重要的。除了看書和看部落格文章之外，我推薦大...
css知多少（5） 選擇器
從本節開始，就進入本系列的第二個部分 css和html的結合 說白了就是選擇器。css中定義了樣式，如何將這些樣式設定到相應的html節點上？就不得不通過選擇器。讓瀏覽器知道css選擇了哪乙個dom節點，瀏覽器就會乖乖的把相應的樣式渲染成檢視。至於css能把頁面渲染成什麼樣子，這是本系列的第三部分。...