清除浮動方法
方法一：使用帶clear屬性的空元素
在浮動元素後使用乙個空元素如
，並在css中賦予.clear屬性即可清理浮動。亦可使用
或來進行清理。
css code複製內容到剪貼簿
xml/html code複製內容到剪貼簿
優點：簡單，**少，瀏覽器相容性好。
缺點：需要新增大量無語義的html元素，**不夠優雅，後期不容易維護。
方法二：使用css的overflow屬性
給浮動元素的容器新增overflow:hidden;或overflow:auto;可以清除浮動，另外在 ie6 中還需要觸發 haslayout ，例如為父元素設定容器寬高或設定 zoom:1。在新增overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
css code複製內容到剪貼簿
xml/html code複製內容到剪貼簿
方法三：給浮動的元素的容器新增浮動
給浮動元素的容器也新增上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。
方法四：使用鄰接元素處理
什麼都不做，給浮動元素後面的元素新增clear屬性。
css code複製內容到剪貼簿
xml/html code複製內容到剪貼簿
注意這裡的div.content有內容。
方法五：使用css的:after偽元素
結合 :after 偽元素（注意這不是偽類，而是偽元素，代表乙個元素之後最近的元素）和 iehack ，可以完美相容當前主流的各大瀏覽器，這裡的 iehwww.cppcns.comack 指的是觸發 haslayout。
給浮動元素的容器新增乙個clearfix的class，然後給這個class新增乙個:after偽元素實現元素末尾新增乙個看不見的塊元素（block element）清理浮動。
css code複製內容到剪貼簿
xml/html code複製內容到剪貼簿
通過css偽元素在容器的內部元素最後新增了乙個看不見的空格"020"或點"."，並且賦予clear屬性來清除浮動。需要注意的是為了ie6和ie7瀏覽器，要給clearfix這個class新增一條zoom:1;觸發haslayout。
總結通過上面的例子，我們不難發現清除浮動的方法可以分成兩類：
一是利用 clear 屬性，包括在浮動元素末尾新增乙個帶有 clear: both 屬性的空 div 來閉合元素，其實利用 :after 偽元素的方法也是在元素末尾新增乙個內容為乙個點並帶有 clear: both 屬性的元素實現的。
二是觸發浮動元素父元素的 bfc (block formatting contexts, 塊級格式化上下文)，使到該父元素可以包含浮動元素，關於這一點。
在網頁主要布局時使用:after偽元素方法並作為主要清理浮動方式；在小模組如ul裡使用overflow:hidden;（留意可能產生的隱藏溢位元素問題）；如果本身就是浮動元素則可自動清除內部浮動，無需格外處理；正文中使用鄰接元素清理之前的浮動。
最後可以使用相對完美的:after偽元素方法清理浮動，文件結構更加清晰。
後記：清除浮動 or 閉合浮動？
在網頁布局中我們會經常用到浮動，有了它我們可以更容易地實現我們想要的效果，但浮動過後往往會留下一些隱患。這時，我們通常會做一件事清除浮動，但清除浮動也會經常留下隱患，如下**：
css code複製內容到剪貼簿
效果圖如下：
雖然foot中使用clear:both清除浮動，但是main的高度無法自適應子元素的高度，導致塌陷（箭頭所指）。
css code複製內容到剪貼簿
本文標題: css清除浮動的方法詳解
本文位址:
清除浮動css詳解
css定位position static relative abslute fixed 1.relative相對定位 s1 內容一 special class s1 內容一 class s1 內容一 class s1 內容一 class s1 內容一 class s1 內容一 view code l...
詳解CSS浮動的清除
浮動的作用比較強大，常用於專案的橫向排列 ok,先給乙個小例子 下面也會以這個小例子來講 先看html charset utf 8 head class boxall class box1 id b box1div class box2 id b box2div class box3 id b bo...
css清除浮動方法
html 浮動 不想被浮動影響 css wrap float nofloat 現在雖然加了乙個空的div，但是並沒有給它清除浮動，所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。ok，現在給.clear加上清除浮動 clear ps 這種情況比較適合元素之間是垂直排列布局的，為了不...