您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > css知多少（9）――float下篇

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

來(lái)源：程序員人生發(fā)布時(shí)間：2015-03-24 08:30:21 閱讀次數(shù)：3059次

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

1. 清除float

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

　　先介紹兩個(gè)比較簡(jiǎn)單，但是不經(jīng)常使用的解決方法：

為父元素添加overflow:hidden
浮動(dòng)父元素

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

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

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

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

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

2. 公道的使用float布局網(wǎng)頁(yè)

　　《上篇》中提到，我們使用float做網(wǎng)頁(yè)布局，是1種誤解和“誤用”。估計(jì)大多數(shù)人誤解了float的本來(lái)設(shè)計(jì)初衷，但是這里的“誤用”是要加引號(hào)的，由于這是1種無(wú)意插柳的利用。即，用float做網(wǎng)頁(yè)布局是很通情達(dá)理的，鼓勵(lì)同志們繼續(xù)使用。

　　但是用float做網(wǎng)頁(yè)布局也是有許多技能的，準(zhǔn)確的利用會(huì)提高網(wǎng)頁(yè)的靈活性。下面我羅列兩個(gè)經(jīng)常使用的網(wǎng)頁(yè)布局案例，僅供大家參考，不喜勿噴，善意留言！

　　第1，3列布局

　　博客園的主頁(yè)就是經(jīng)典的3列布局，很明顯的左、中、右。

　　對(duì)這類布局，我給出的布局方案是：

　　第2，兩列布局

　　以博客園1篇文章的鏈接為例，它分為左、右結(jié)構(gòu)

　　對(duì)這類布局的格式，我的設(shè)計(jì)方案是：

3. BootStrap的柵格系統(tǒng)

　　如果您熟習(xí)并使用bootstrap，那末您將沒(méi)必要自己去操心網(wǎng)頁(yè)布局，由于bootstrap已把網(wǎng)頁(yè)分成了12列，您可以隨便設(shè)置多列布局，非常方便。這就是bootstrap的柵格系統(tǒng)。此處不會(huì)詳解柵格系統(tǒng)，就是簡(jiǎn)單看看柵格系統(tǒng)的實(shí)現(xiàn)，它是用float實(shí)現(xiàn)的。