css 全方位清理浮動總結

1.採用偽類:after進行後續空制的高度位零的偽類層清除

2.採用css overflow:auto的方式撐高

3.採用css overflow:hidden的方式產生怪異適應

4.採用display:table將對象變成table形式

5.採用div標籤，以及css的clear屬性

6.採用br標籤，以及css的clear屬性

7.採用br標籤，以及其自身html的clear屬性

8.粗略的看，他們都能將問題解決；然而他們另外一方面又有著各自的利弊。（一一對應）

 

1.

優點結構語義化完全正確，不會產生其餘的怪異問題。

 

缺點複用方式不當容易造成代碼量急劇增大。

 

建議最外層輕浮動時使用，或清晰模組化複用方式的人使用。

2.

 

優點結構語義化完全正確，代碼量極少。

 

缺點多個嵌套後，點擊最外層的輕浮動框會遭成最外層至最內層內容全選（ff）；或者在mouseo教程ver造成寬度改變時會出現最外層模組有捲軸（ie）。

 

建議內個模組使用，請勿嵌套。

3.

 

優點結構語義化完全正確，代碼量極少。

 

缺點內容增多時候極易不會自動換行而內容被隱藏掉。

 

建議寬度固定時使用，請勿嵌套。

4.

 

優點結構語義化完全正確，代碼量極少。

 

缺點盒模型屬性已經改變，可想而知奇異事件自然多得你數都數不到。

 

建議如果你不想改bug改死你的話，最好不要使用；不過可以作為alpha版本當中臨時性的忽悠下測試。

5.

 

優點代碼量極少，複用性極高。

 

缺點完全不能完美的適應語義化，不利於改版以及需求變更。

 

建議初學者使用，可以讓你快速的解決浮動問題。

6.

 

優點語義化程度比第5種情況要更優；代碼量極少，複用性極高。

 

缺點語義化依舊不完美，不利於改版以及需求變更。

 

建議初學者使用，可以讓你快速的解決浮動問題。

7.

 

優點語義化程度比第5、6種情況要更優；代碼量最少，複用性極高。

 

缺點語義化依舊不完美，不利於改版以及需求變更。

 

建議引導初學者思維升級時使用，讓其明白與其用classname來控制一種表現，倒不如迴歸到web1.0的時代的網頁直接用html屬性來控製表現，畢竟後者的代碼量更少。