CSS清理浮動的全家

2020-03-24 18:01:01

字體：大中小

來源：轉載

供稿：網友

我們粗略的一起來看看清除浮動的辦法一共有多少個(IE里面用zoom:1就不寫了，下一個專題再寫)。
采用偽類:after進行后續空制的高度位零的偽類層清除
采用CSS overflow:auto的方式撐高
采用CSS overflow:hidden的方式產生怪異適應
采用display:table將對象變成table形式
采用div標簽，以及css的clear屬性
采用br標簽，以及css的clear屬性
采用br標簽，以及其自身HTML的clear屬性
粗略的看，他們都能將問題解決；然而他們另外一方面又有著各自的利弊。（一一對應）
優點結構語義化完全正確，不會產生其余的怪異問題。缺點復用方式不當容易造成代碼量急劇增大。建議最外層輕浮動時使用，或清晰模塊化復用方式的人使用。優點結構語義化完全正確，代碼量極少。缺點多個嵌套后，點擊最外層的輕浮動框會遭成最外層至最內層內容全選（FF）；或者在mouseover造成寬度改變時會出現最外層模塊有滾動條（IE）。建議內個模塊使用，請勿嵌套。優點結構語義化完全正確，代碼量極少。缺點內容增多時候極易不會自動換行而內容被隱藏掉。建議寬度固定時使用，請勿嵌套。優點結構語義化完全正確，代碼量極少。缺點盒模型屬性已經改變，可想而知奇異事件自然多得你數都數不到。建議如果你不想改Bug改死你的話，最好不要使用；不過可以作為alpha版本當中臨時性的忽悠下測試。優點代碼量極少，復用性極高。缺點完全不能完美的適應語義化，不利于改版以及需求變更。建議初學者使用，可以讓你快速的解決浮動問題。優點語義化程度比第5種情況要更優；代碼量極少，復用性極高。缺點語義化依舊不完美，不利于改版以及需求變更。建議初學者使用，可以讓你快速的解決浮動問題。優點語義化程度比第5、6種情況要更優；代碼量最少，復用性極高。缺點語義化依舊不完美，不利于改版以及需求變更。建議引導初學者思維升級時使用，讓其明白與其用html' target='_blank'>classname來控制一種表現，倒不如回歸到WEB1.0的時代的網頁直接用html屬性來控制表現，畢竟后者的代碼量更少。最后，列舉完畢。然而在我的心中還是有一些事情要和大家說的，第一個是要和大家道歉，關于之前轉載Ghost的那篇文章；非常后悔的是當初改了ghost的標題將“最簡單”改成了“最優”，以致于后面誤導了很多的同學。第二個是最近發現很多本站的冒牌站點（抄內容就算了，樣式也抄就太過分了），更搞笑的是拿著這樣的站點來我這里面試 hellip;…這里還是希望大家尊重Creative Commons License，轉載的時候保留署名，謝謝！(不然我就會把文章改名為清你全家的浮動了。)
本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS圓角——基本的圓角框

下一篇：css基礎教程屬性篇