清除浮動(dòng)的八種方法

2018-3-14    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里 

浮動(dòng)是什么?

浮動(dòng)元素會脫離文檔流進(jìn)行左浮或者右浮,直到碰到父級元素或者其他的浮動(dòng)元素。

為什么清除浮動(dòng):浮動(dòng)會導(dǎo)致父元素高度坍塌,因?yàn)楦?dòng)脫離文檔流,浮動(dòng)以后不占文檔流的位置,撐開的父元素高度肯定會坍塌。

清除浮動(dòng)的八種方法:

1、父級div給出固定的高度。手動(dòng)定義height,這樣就解決了父級元素獲取不到高度的問題。

優(yōu)點(diǎn):代碼量少,簡單容易掌握。

缺點(diǎn):只適合高度固定的布局,如果高度和父級div不同會出現(xiàn)問題。

2、overflow,設(shè)置overflow:hidden。

優(yōu)點(diǎn):代碼少,瀏覽器支持。

缺點(diǎn):會把超出的部分隱藏起來,而且不能配合position使用

3、額外標(biāo)簽,添加一個(gè)新的標(biāo)簽,如div,或者br,并且設(shè)置標(biāo)簽的屬性clear:both;清除浮動(dòng),讓父級能自動(dòng)獲得高度。

優(yōu)點(diǎn):代碼少,瀏覽器支持,不會各種問題。

缺點(diǎn):會有很多空的div或者br。

4、使用單偽類after和zoom,使用方法:

.clearfloat:after{

  content:"";//設(shè)置內(nèi)容為空

  height:0;//高度為0

  line-height:0;//行高為0

  display:block;//將文本轉(zhuǎn)為塊級元素

  visibility:hidden;//將元素隱藏

  clear:both//清除浮動(dòng)

 }

  .clearfloat{

 zoom:1;為了兼容IE

    }

優(yōu)點(diǎn):瀏覽器支持好,大型的瀏覽器都在使用,建議使用。

缺點(diǎn):代碼多,需要after和zoom都要使用才能兼容主流的瀏覽器。

5、雙偽類清除浮動(dòng)。使用方法:

.clearfloat:before,.clearfloatafter {

                 content: "";

                 display: block;

                  clear: both;

             }

            .clearfloat {

                 zoom: 1;

           }

缺點(diǎn):不嚴(yán)謹(jǐn)不建議使用

6、父級div跟著浮動(dòng),所有代碼一起浮動(dòng)就會形成一個(gè)整體,

缺點(diǎn):會產(chǎn)生新的問題,不建議使用。

7、父級定義display:table;將div屬性變成的表格。

缺點(diǎn):產(chǎn)生新的問題,而且影響布局。

8、overflow:auto;需要設(shè)置width,不設(shè)置height,瀏覽器會自動(dòng)檢測浮動(dòng)區(qū)的高度。

缺點(diǎn):容易生成滾動(dòng)條。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)





分享本文至:

日歷

鏈接

個(gè)人資料

存檔