發表於2023年2月1日
由sivan
文章目錄[ - ]
前言清理浮動的方法
使用帶有clear屬性的空元素
使用css的:after偽元素
使用css的overflow屬性進行怪異處理
給浮動元素的容器新增浮動
使用鄰接元素清理
其他方法
我的解決方案
綜合運用方案
一勞永逸方案
小結(update 2011.02.01)配合重寫了一下本文。
近期有一專案涉及修改別人所寫的主題，在清理浮動的環節上無比痛苦。在此整理一下關於清理浮動的方法和我的看法，希望能提供一些參考作用。
浮動（float）最初的定義我想只是為了實現**環繞效果，而如今通常在多欄布局時使用，是css裡最最常用的一種布局手段。比起聖杯布局等，它更加容易上手並容易處理布局問題。由於浮動的特性，在布局中使用就產生了兩個問題——會對後面的元素造成影響而且造成浮動元素的容器高度失效。因此我們需要隨時清理浮動，方法有很多但各有弊端。選擇合理的清理方式除了讓**看起來更優雅，還會對日後維護提供很大的方便。
在浮動元素後使用乙個空元素如
，並在css中賦予.clear屬性即可清理浮動。亦可使用
或來進行清理。
我想說這並不是乙個好方法，儘管它相容所有瀏覽器並且隨用隨清。這個方法需要新增大量無語義的html元素，你能想象乙個並不算複雜的footer裡就使用4次div.clear嗎？天哪！
給浮動元素的容器新增乙個clearfix的class，然後給這個class新增乙個:after偽元素實現元素末尾新增乙個看不見的塊元素（block element）清理浮動。這是我認為目前比較完美的解決方式。
如圖所見，通過css偽元素在容器的內部元素最後新增了乙個看不見的空格「/20」或點「.」 （後者可理解為一些國外書籍過時的介紹:0）並且賦予clear屬性來清除浮動。需要注意的是為了ie6和ie7瀏覽器，要給clearfix這個class新增一條zoom:1;觸發haslayout（你可以把它寫到ie6、7的css hacker檔案裡，這樣不會影響w3c標準驗證）。
該方法需要給每組浮動元素都新增乙個容器，推薦在頁面布局時使用。大量使用依舊會對**量造成一些影響。
另外我想說的一點：我傾向於《無懈可擊的web設計ii》一書中提到的把.clearfix改為.group，讓**的可讀性更好。group說明內部元素為一組，使用clearfix客戶會誤認為「你寫了些神馬？竟然用了這麼多『修正』！」。
給浮動元素的容器新增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處理布局中遇到的各種問題。
CSS 清理浮動 clear屬性
文章 雖然浮動可以便於頁面布局，但同時會產生一些問題，也就是常說的 浮動元素最常見的缺陷是 父元素的高度塌陷和影響兄弟元素的位置。首先，看看父元素的高度塌陷。假設有乙個容器，其中兩個子元素，乙個子元素向左浮動，乙個子元素向右浮動。如下 box2 圖5 29 浮動導致容器高度塌陷 這種塌陷會影響 甚至...
CSS（11）CSS浮動和清理
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。1 請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣 2 再請看下圖，當框 1 向左浮動時，它脫...
CSS 浮動清理，不使用 clear both標籤
在進行浮動布局時，大多數人都深知，在必要的地方進行浮動清理，例如 some content 此時預覽此 我們會發現最外層的父元素float container,並沒有顯示。這是因為子元素因進行了浮動，而脫離了文件流，導致父元素的height為零。若將 修改為 some content 注意，多了一段...