清除浮動乙個凡是做頁面的人都會遇到的乙個東西，但是是否大家都能夠清楚的知道，全方位的了解呢？於是一閒下來了馬上寫了這樣的一篇文章，不能講面面俱到，然而基本能將我所知道的傾囊相授了。
1. 採用偽類:after進行後續空制的高度位零的偽類層清除
優點結構語義化完全正確，不會產生其餘的怪異問題。
缺點復用方式不當容易造成**量急劇增大。
建議最外層輕浮動時使用，或清晰模組化復用方式的人使用。
2. 採用css overflow:auto的方式撐高
優點結構語義化完全正確，**量極少。
缺點多個巢狀後，點選最外層的輕浮動框會遭成最外層至最內層內容全選（ff）；或者在mouseover造成寬度改變時會出現最外層模組有滾動條（ie）。
建議內個模組使用，請勿巢狀。
3. 採用css overflow:hidden的方式產生怪異適應
優點結構語義化完全正確，**量極少。
缺點內容增多時候極易不會自動換行而內容被隱藏掉。
建議寬度固定時使用，請勿巢狀。
4. 採用display:table將物件變成table形式
優點結構語義化完全正確，**量極少。
缺點盒模型屬性已經改變，可想而知奇異事件自然多得你數都數不到。
建議如果你不想改bug改死你的話，最好不要使用；不過可以作為alpha版本當中臨時性的忽悠下測試。
5. 採用div標籤，以及css的clear屬性
優點**量極少，復用性極高。
缺點完全不能完美的適應語義化，不利於改版以及需求變更。
建議初學者使用，可以讓你快速的解決浮動問題。
6. 採用br標籤，以及css的clear屬性
優點語義化程度比第5種情況要更優；**量極少，復用性極高。
缺點語義化依舊不完美，不利於改版以及需求變更。
建議初學者使用，可以讓你快速的解決浮動問題。
7. 採用br標籤，以及其自身html的clear屬性
優點語義化程度比第5、6種情況要更優；**量最少，復用性極高。
缺點語義化依舊不完美，不利於改版以及需求變更。
建議引導初學者思維公升級時使用，讓其明白與其用classname來控制一種表現，倒不如回歸到web1.0的時代的網頁直接用html屬性來控制表現，畢竟後者的**量更少。
清理浮動相關
我們將現有已知的清楚浮動元素方法羅列下 採用乙個html標籤，以及css的clear屬性，來手工清理浮動 採用偽類 after，動態建立乙個塊元素，設定 clear 屬性，清理之前的浮動元素 採用css overflow 非 visible 值 overflow auto overflow hidd...
CSS清理浮動
發表於2011年2月1日 由sivan 文章目錄 前言清理浮動的方法 使用帶有clear屬性的空元素 使用css的 after偽元素 使用css的overflow屬性進行怪異處理 給浮動元素的容器新增浮動 使用鄰接元素清理 其他方法 我的解決方案 綜合運用方案 一勞永逸方案 小結 update 20...
清理浮動的方法
1.clear屬性 屬性值 left right both none 表示框的哪些邊不能挨著浮動框 新增乙個空元素並清理它 news news img news p clear text 新增乙個 或其他的,新增clear屬性，清理它上面的浮動元素，both即清理左浮動和右浮動 缺點 新增了不必要的...