幾種css 清除浮動的方法

來源:互聯網
上載者:User

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屬性

  粗略的看,他們都能將問題解決;然而他們另外一方面又有著各自的利弊。(一一對應)

1、優點結構語義化完全正確,不會產生其餘的怪異問題。
  缺點複用方式不當容易造成代碼量急劇增大。
  建議最外層輕浮動時使用,或清晰模組化複用方式的人使用。

2、優點結構語義化完全正確,代碼量極少。
  缺點多個嵌套後,點擊最外層的輕浮動框會遭成最外層至最內層內容全選(ff);或者在mouseo教程ver造成寬度改變時會出現最外層模組有捲軸(ie)。
  建議內個模組使用,請勿嵌套。

3、優點結構語義化完全正確,代碼量極少。
  缺點內容增多時候極易不會自動換行而內容被隱藏掉。
  建議寬度固定時使用,請勿嵌套。

4、優點結構語義化完全正確,代碼量極少。
  缺點盒模型屬性已經改變,可想而知奇異事件自然多得你數都數不到。
  建議如果你不想改bug改死你的話,最好不要使用;不過可以作為alpha版本當中臨時性的忽悠下測試。

5、優點代碼量極少,複用性極高。
  缺點完全不能完美的適應語義化,不利於改版以及需求變更。
  建議初學者使用,可以讓你快速的解決浮動問題。

6、優點語義化程度比第5種情況要更優;代碼量極少,複用性極高。
  缺點語義化依舊不完美,不利於改版以及需求變更。
  建議初學者使用,可以讓你快速的解決浮動問題。

7、優點語義化程度比第5、6種情況要更優;代碼量最少,複用性極高。
  缺點語義化依舊不完美,不利於改版以及需求變更。
  建議引導初學者思維升級時使用,讓其明白與其用classname來控制一種表現,倒不如迴歸到web1.0的時代的網頁直接用html屬性來控製表現,畢竟後者的代碼量更少。

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.