如何清除css浮動(dòng)

這篇文章主要介紹如何清除css浮動(dòng)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一，我們?yōu)槭裁匆?dòng)

為什么浮動(dòng)，為什么要清除浮動(dòng)，以及清除浮動(dòng)的方法。在網(wǎng)頁布局的時(shí)候有時(shí)需要元素并排顯示，如果不選擇浮動(dòng)，那么那些塊狀元素就會(huì)一行一行顯示，占用空間不說，用戶體驗(yàn)也是極為不好的。

以下是沒有浮動(dòng)的元素代碼

<div class=“box”>
        <div class=“box01”></div>
        <div class=“box02”></div>
    </div>
 .box{
    background: #000;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
}

1-1圖是沒有浮動(dòng)的元素，1-2圖是外層容器的寬高，下文會(huì)說到此次用意

在我們給元素加上浮動(dòng)之后，布局就變了，兩個(gè)div并排顯示了，如圖1-3，是不是很神奇，哈哈

但是大家有沒有發(fā)現(xiàn)最外一層的div背景色沒了，高度也變成了0，因?yàn)樵孛撾x的文檔流，在最外層的div中不占空間，這時(shí)我們就需要清除浮動(dòng)，清除由子元素浮動(dòng)給父元素帶來坍塌的影響。（注意這里清除浮動(dòng)不是指之前給子元素設(shè)置的浮動(dòng)，二是清除浮動(dòng)給父元素帶來的影響，希望大家能明白）。

二清除浮動(dòng)有三種方法：

第一種：clear:both;

在父元素的里面添加一個(gè)類clear的div（跟box01,box02同級），然后再為這個(gè)類添加屬性值clear:both;便可以清除浮動(dòng)，以下是代碼以及清除浮動(dòng)之后的效果如圖1-3

<div class=“box”>
        <div class=“box01”></div>
        <div class=“box02”></div>
        <div class=“clear”></div>
    </div>
   .box{
    background: #000;
}
.clear{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

可以看到背景色出來了，而父元素的高正是100px，這是子元素?fù)伍_的。

第二種：overflow：hidden；

在父元素添加overflow: hidden;也可以清除浮動(dòng)，如下css代碼，但不提倡使用這個(gè)方法，overflow: hidden;還有一個(gè)意思就是隱藏超出的部分，處理不好還是會(huì)給頁面帶來麻煩。

.box{
        background: #000;
        overflow: hidden;
    }

第三種：clearfix；

如果你的頁面使用bootstrap框架，引入css文件，給父元素添加clearfix便可以清除浮動(dòng)，這也是平時(shí)工作中最常用也是最受程序員喜歡的一種方法，只需添加一個(gè)類便可，而clear:both則是向頁面多加了一個(gè)div。所以小編向大家推薦第三種方法。

如果你的頁面使用的不是bootstrap框架，那么也有源碼供初學(xué)者參考，向clearfix添加偽類實(shí)現(xiàn)清除浮動(dòng)。

<div class=“box clearfix”>
        <div class=“box01”></div>
        <div class=“box02”></div>
        <div class=“clear”></div>
    </div>
 .box{
    background: #000;
}
.clearfix:before,.clearfix:after{
    content: ”;
    display: table;//可以很好的解決瀏覽器兼容問題
}
.clearfix:after{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

以上是“如何清除css浮動(dòng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！