清除浮動的那些事

前言

近期有一項目涉及修改別人所寫的主題，在清理浮動的環節上無比痛苦。在此整理一下關於清理浮動的方法和個人見解，但願能提供一些參考做用。

浮動（Float）最初的定義我想只是爲了實現圖文環繞效果，而現在一般在多欄佈局時使用，是CSS裏最最經常使用的一種佈局手段。比起聖盃佈局等，它更加容易上手並容易處理佈局問題。因爲浮動的特性，在佈局中使用就產生了兩個問題——會對後面的元素形成影響並且形成浮動元素的容器高度失效。所以咱們須要隨時清理浮動，方法有不少但各有弊端。選擇合理的清理方式除了讓代碼看起來更優雅，還會對往後維護提供很大的方便。

清理浮動的方法

方法一：使用帶有clear屬性的空元素

在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性便可清理浮動。亦可以使用<br class="clear" /> 或<hr class="clear" />來進行清理。 

我想說這並非一個好方法，儘管它兼容全部瀏覽器而且隨用隨清。這個方法須要添加大量無語義的html元素，你能想象一個並不算複雜的footer裏就使用4次div.clear嗎？天哪！

 

方法二：使用CSS的:after僞元素

給浮動元素的容器添加一個clearfix的class，而後給這個class添加一個:after僞元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。這是我認爲目前比較完美的解決方式。

如圖所見，經過CSS僞元素在容器的內部元素最後添加了一個看不見的空格「/20」或點「.」 （後者可理解爲一些國外書籍過期的介紹:0）而且賦予clear屬性來清除浮動。須要注意的是爲了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout（你能夠把它寫到IE六、7的CSS hacker文件裏，這樣不會影響W3C標準驗證）。

該方法須要給每組浮動元素都添加一個容器，推薦在頁面佈局時使用。大量使用依舊會對代碼量形成一些影響。

另外我想說的一點：我傾向於《無懈可擊的Web設計II》一書中提到的把.clearfix改成.group，讓代碼的可讀性更好。group說明內部元素爲一組，使用clearfix客戶會誤認爲「你寫了些神馬？居然用了這麼多‘修正’！」。

方法三：使用CSS的overflow屬性進行怪異處理

給浮動元素的容器添加overflow:hidden;或overflow:auto;能夠怪異清理浮動。

在清理浮動前（如箭頭上圖），浮動的元素跳離了container層，本身跑到上層去了（用陰影表示）。在添加overflow屬性後（如箭頭下圖），浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

雖然不少地方以「未來瀏覽器可能不兼容」爲由，不建議使用此方法。我卻是以爲目前使用此法的國內外網站衆多，瀏覽器短期內並不會在此問題上後退處理。此外這個方法無需添加額外的class，在作主題時比較實用。我建議在局部和沒法添加class的地方使用該方法清理浮動，可是不要做爲主要清理浮動方式。overflow:auto;仍是不要用了。

 

方法四：給浮動元素的容器添加浮動

給浮動元素的容器也添加上浮動屬性便可清理內部浮動。同overflow法同樣無須添加額外的class，使用方便可是會對下面的文檔形成影響。

建議在容器本來就浮動或者容器使用了絕對定位時使用該方法。不要在主要佈局中使用。

方法五：使用鄰接元素清理

什麼都不作，給浮動元素後面的元素添加clear屬性。

要確保的是content元素跟兩個浮動元素都在同一層container容器內，若是content在container元素後面，建議使用:after僞元素清理。

方法六：其餘方法

使用display:table模擬表格佈局也能夠解決浮動的問題，並可自動對齊高度。可是因爲table的一系列問題，仍是不要使用了。

個人解決方案

綜合運用方案

在網頁主要佈局時使用:after僞元素方法並做爲主要清理浮動方式；在小模塊如ul或textwidget裏使用overflow:hidden;（留意可能產生的隱藏溢出元素問題）；若是自己就是浮動元素則可自動清除內部浮動，無需格外處理；正文中使用鄰接元素清理以前的浮動。

優勢：能夠有效下降代碼量，使用得當能夠完善解決浮動清理問題。
缺點：須要熟悉各類清理方式的原理和利弊，需作好註釋，不然對往後維護形成沒必要要的麻煩。

一勞永逸方案

整站使用相對完美的:after僞元素法清理浮動。本方案適合文檔結構清晰、模塊化的頁面。

優勢：使用方便，維護方便，不多出現錯誤。
缺點：須要清晰的文檔結構，不然會形成代碼量劇。

小結

經過對各類方法的分析，體現出網頁重構時除了要對css應用得當並考慮良好的兼容性，還要培養寫良好html文檔結構的能力。只有html的結構整潔，模塊清晰，才能更好的使用css處理佈局中遇到的各類問題。