tion %> 山东麻将全将
當前位置:首頁 > 建站知識

全方位清理浮動

更新時間:2009.06.21 瀏覽次數:

清除浮動一個凡是做頁面的人都會遇到的一個東西,但是是否大家都能夠清楚的知道,全方位的了解呢?于是一閑下來了馬上寫了這樣的一篇文章,不能講面面俱到,然而基本能將我所知道的傾囊相授了。

我們粗略的一起來看看清除浮動的辦法一共有多少個(IE里面用zoom:1就不寫了,下一個專題再寫)。對應的DEMO

  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);或者在mouseover造成寬度改變時會出現最外層模塊有滾動條(IE)。
    建議內個模塊使用,請勿嵌套
  3. 優點結構語義化完全正確,代碼量極少。
    缺點內容增多時候極易不會自動換行而內容被隱藏掉。
    建議寬度固定時使用,請勿嵌套
  4. 優點結構語義化完全正確,代碼量極少。
    缺點盒模型屬性已經改變,可想而知奇異事件自然多得你數都數不到。
    建議如果你不想改Bug改死你的話,最好不要使用;不過可以作為alpha版本當中臨時性的忽悠下測試。
  5. 優點代碼量極少,復用性極高。
    缺點完全不能完美的適應語義化,不利于改版以及需求變更。
    建議初學者使用,可以讓你快速的解決浮動問題。
  6. 優點語義化程度比第5種情況要更優;代碼量極少,復用性極高。
    缺點語義化依舊不完美,不利于改版以及需求變更。
    建議初學者使用,可以讓你快速的解決浮動問題。
  7. 優點語義化程度比第5、6種情況要更優;代碼量最少,復用性極高。
    缺點語義化依舊不完美,不利于改版以及需求變更。
    建議引導初學者思維升級時使用,讓其明白與其用classname來控制一種表現,倒不如回歸到WEB1.0的時代的網頁直接用html屬性來控制表現,畢竟后者的代碼量更少。

最后,列舉完畢。然而我想有必要和大家道歉,關于之前轉載鬼的那篇文章;非常后悔的是當初改了鬼的標題將“最簡單”改成了“最優”,以致于后面誤導了很多的同學。所以重新寫了一篇給大家分享。

烟台麻将规则 京东和淘宝开店赚钱吗 江西快三7月20号推测 迅盈篮球nba比分直播 dnf10周年锻造券赚钱 快乐十分软件 江苏7位数 pk10全天免费冠军计划 重庆时时人工计划网一期 4场进球 一分快三技巧大小玩法 炸金花出自于哪里 dnf起源炼金术赚钱 三水广西麻将打牌 广东十一选五 票圈长赚钱 波克棋牌下载