css知多少（9）――float下篇

　　float內容比較多，我們分上、下兩篇來介紹，上篇已寫完，這是下篇。建議大家先把上篇看了，再來看下文，精彩內容不要掠過啊。

1. 清除float

　　《上篇》中我們提到，float具有“破壞性”，它會致使父元素“坍塌”，這將不是所要看到的。如何去避免float帶來的這類影響呢（也就是我們常說的“清除浮動”） ？方法有很多種，我在這里介紹4中供大家參考，大家可根據實際情況來選擇。

　　先介紹兩個比較簡單，但是不經常使用的解決方法：

1. 為父元素添加overflow:hidden
2. 浮動父元素

　　這兩個方法比較簡單，在這里也就不再演示了，大家有興趣的可以自己去試試。

　　第3種方法也不是很經常使用，但是大家要知道clear:both這個東西。通過在所有浮動元素下方添加1個clear:both的元素，可以消除float的破壞性。

　　接下來的第4種方法是大家最需要掌握的，也是我推薦的，也是bootstrap正在用的――clearfix――不知道的同學1定要去搜1下，要不然就太low了！

　　上圖中，我們定義1個.clearfix類，然后對float元素的父元素利用這1樣式便可，非常簡單吧？注意，你可能會搜出不同版本的clearfix，有的代碼比上圖中的代碼多，你不用理睬它，就依照我的貼圖的代碼寫就行。

　　究其原理，其實就是通過偽元素選擇器，在div后面增加了1個clear:both的元素，跟第3種方法是1個道理。

2. 公道的使用float布局網頁

　　《上篇》中提到，我們使用float做網頁布局，是1種誤解和“誤用”。估計大多數人誤解了float的本來設計初衷，但是這里的“誤用”是要加引號的，由于這是1種無意插柳的利用。即，用float做網頁布局是很通情達理的，鼓勵同志們繼續使用。

　　但是用float做網頁布局也是有許多技能的，準確的利用會提高網頁的靈活性。下面我羅列兩個經常使用的網頁布局案例，僅供大家參考，不喜勿噴，善意留言！

　　第1，3列布局

　　博客園的主頁就是經典的3列布局，很明顯的左、中、右。

　　對這類布局，我給出的布局方案是：

　　第2，兩列布局

　　以博客園1篇文章的鏈接為例，它分為左、右結構

　　對這類布局的格式，我的設計方案是：

3. BootStrap的柵格系統

　　如果您熟習并使用bootstrap，那末您將沒必要自己去操心網頁布局，由于bootstrap已把網頁分成了12列，您可以隨便設置多列布局，非常方便。這就是bootstrap的柵格系統。此處不會詳解柵格系統，就是簡單看看柵格系統的實現，它是用float實現的。

　　通過閱讀器監控每一個單元格的css樣式，可以發現，單元格通過百分比設置了寬度，通過float:left設置了浮動。

　　對父元素的清除浮動，bootstrap使用的就是《上篇》中說的clearfix，大家可以自行檢測1下試試。

　　多看看經典軟件的源碼是學習的1個捷徑，學習css可以看看bootstrap，學習js可以看看jquery……

4. 總結

　　float內容非常多，有的css書籍中，也很難全面的講授float這1知識點的全部內容。這就需要自己去多多看書，多多實踐，多多看經典系統的源碼，才能做到融會貫通，舉1反10。

　　大家共勉吧。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈