清除浮動的幾種方式,各自的優(yōu)缺點

問:清除浮動的幾種方式,各自的優(yōu)缺點

1.使用空標簽清除浮動clear:both。

原理:添加一個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度

優(yōu)點:通俗易懂,容易掌握

缺點:會添加很多無意義的空標簽,有違結構與表現(xiàn)的分離,在后期維護中將是噩夢

建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法

2.父級div定義overflow:hidden

原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden時,瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點:簡單,代碼少,瀏覽器支持好

缺點:不能和position配合使用,因為超出的尺寸的會被隱藏

建議:只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用

3、父級div定義偽類:after和zoom(用于非IE瀏覽器)

原理:IE8以上和非IE瀏覽器才支持:after,原理和方法1有點類似,zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題

優(yōu)點:瀏覽器支持好,不容易出現(xiàn)怪問題(目前:大型網(wǎng)站都有使用,如:騰迅,網(wǎng)易,新浪等等)。

缺點:代碼多,要兩句代碼結合使用,才能讓主流瀏覽器都支持

建議:推薦使用,建議定義公共類,以減少CSS代碼

1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;

2) height:0 避免生成內(nèi)容破壞原有布局的高度。

3) visibility:hidden 使生成的內(nèi)容不可見,并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進行點擊和交互;

4)通過 content:"."生成內(nèi)容作為最后一個元素,至于content里面是點還是其他都是可以的,例如oocss里面就有經(jīng)典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面內(nèi)容為空,不推薦這樣做的,firefox直到7.0 content:”" 仍然會產(chǎn)生額外的空隙;

5)zoom:1 觸發(fā)IE hasLayout。

通過分析發(fā)現(xiàn),除了clear:both用來清除浮動的,其他代碼無非都是為了隱藏掉content生成的內(nèi)容,這也就是其他版本的閉合浮動為什么會有font-size:0,line-height:0。

偽類after

4、父級div定義height

原理:父級div手動定義height,就解決了父級div無法自動獲取到高度的問題。

優(yōu)點:簡單,代碼少,容易掌握

缺點:只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產(chǎn)生問題

5、父級div定義overflow:auto

原理:必須定義width或zoom:1,同時不能定義height,使用overflow:auto時,瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點:簡單,代碼少,瀏覽器支持好

缺點:內(nèi)部寬高超過父級div時,會出現(xiàn)滾動條。

建議:不推薦使用,如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,096評論 1 92
  • 這篇文章極好,以至于讓我受益良多,就一字沒有改動的轉(zhuǎn)發(fā)過來一絲冰涼老師的文章 需要注意的是,display:tab...
    新晉小牛牛閱讀 1,125評論 0 2
  • 我們在日常開發(fā)布局中經(jīng)常會使用到流體布局,流體布局用到的一個最重要的屬性就是浮動,今天就來看看浮動的相關知識。 1...
    一木_qintb閱讀 1,219評論 0 2
  • 浮動:float,常用的css屬性,可以設置左浮動float:left;右浮動float:right;不浮動flo...
    好怪的怪獸閱讀 4,765評論 2 6
  • 前幾天《三體》作者劉新慈和一外國科幻作家來講座,想去近距離感受一下,因為我是科幻愛好者,刷覺醒字幕組的網(wǎng)站是一大樂...
    batmandy閱讀 545評論 0 50

友情鏈接更多精彩內(nèi)容