這篇文章將為大家詳細(xì)講解有關(guān)css中清除浮動(dòng)的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

懷遠(yuǎn)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！

一、理解清除浮動(dòng)

1、為什么要清除浮動(dòng)

我們前面說(shuō)過(guò)，浮動(dòng)本質(zhì)是用來(lái)做一些文字混排效果的，但是被我們拿來(lái)做布局用，則會(huì)有很多的問(wèn)題出現(xiàn)。

由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響，為了解決這些問(wèn)題，此時(shí)就需要在該元素中清除浮動(dòng)。

準(zhǔn)確地說(shuō)，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響

2、清除浮動(dòng)本質(zhì)

清除浮動(dòng)的本質(zhì): 主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問(wèn)題。

我們來(lái)詳細(xì)解釋下這句話(huà)

再解釋下就是在標(biāo)準(zhǔn)流下面一個(gè)父p沒(méi)有設(shè)置高度屬性,那么它的高度就會(huì)被子元素的高度撐開(kāi)。但是如果這個(gè)父p中的子元素是浮動(dòng)的話(huà)，如果父p下面再有

一個(gè)兄弟p，那么這個(gè)兄弟p就會(huì)遮擋這個(gè)父元素。這個(gè)現(xiàn)象也叫浮動(dòng)溢出。

示例

    
    
    


    
 父p
        
子p
        
子p
    

    
兄弟p

運(yùn)行結(jié)果

很明顯這里，p1和p2已經(jīng)上浮，而兄弟p就往上移動(dòng)。這里因?yàn)楦竝有文字所以占了點(diǎn)高度，不然兄弟p會(huì)完全覆蓋父p。

當(dāng)然我們可以通過(guò)設(shè)置父p的高度，來(lái)使它不被兄弟p所覆蓋。比如這里設(shè)置 height: 200px;

在刷新下頁(yè)面

當(dāng)父p設(shè)置高度后，被覆蓋的問(wèn)題卻是解決了，但在很多時(shí)候我們是不會(huì)去設(shè)置父p的高度，因?yàn)楹芏鄷r(shí)候我們都不知道父p的高度要設(shè)置多少。

所以這個(gè)時(shí)候需要思考解決這個(gè)問(wèn)題。

二、清除浮動(dòng)的方法

清除浮動(dòng)的方法本質(zhì): 就是把父盒子里浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來(lái)影響其他元素。

在CSS中，clear屬性用于清除浮動(dòng)。

基本語(yǔ)法格式

選擇器 {clear:屬性值;}

屬性值

1、額外標(biāo)簽法

通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽，例如

我們?cè)谏厦娴拇a添加

    
 父p
        
子p
        
子p
        
  
    

    
兄弟p

運(yùn)行結(jié)果

完美解決了。

優(yōu)點(diǎn) 通俗易懂，書(shū)寫(xiě)方便。

缺點(diǎn) 添加無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差。

2、父級(jí)添加overflow屬性方法

可以通過(guò)觸發(fā)BFC的方式，可以實(shí)現(xiàn)清除浮動(dòng)效果。（BFC后面會(huì)講）

可以給父級(jí)元素添加： overflow為 hidden|auto|scroll  都可以實(shí)現(xiàn)。

我們將上面代碼修改為

    
 父p   
        
子p
        
子p
    

    
兄弟p

也是能實(shí)現(xiàn)去除浮動(dòng)的效果。

優(yōu)點(diǎn) 代碼簡(jiǎn)潔

缺點(diǎn) 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。

3、使用after偽元素清除浮動(dòng)

:after 方式為空元素的升級(jí)版，好處是不用單獨(dú)加標(biāo)簽了**

示例

優(yōu)點(diǎn) 符合閉合浮動(dòng)思想 結(jié)構(gòu)語(yǔ)義化正確

缺點(diǎn) 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

注意： content:"." 里面盡量跟一個(gè)小點(diǎn)，或者其他，盡量不要為空，否則再firefox 7.0前的版本會(huì)有生成空格。

4、使用before和after雙偽元素清除浮動(dòng)

使用方法 將上面的clearfix樣式替換成如下

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

優(yōu)點(diǎn) 代碼更簡(jiǎn)潔

缺點(diǎn) 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

5、總結(jié)

1、在網(wǎng)頁(yè)主要布局時(shí)使用:after偽元素方法并作為主要清理浮動(dòng)方式.文檔結(jié)構(gòu)更加清晰；
2、在小模塊如ul里推薦使用overflow:hidden;（同時(shí)留意可能產(chǎn)生的隱藏溢出元素問(wèn)題）；

關(guān)于css中清除浮動(dòng)的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。