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

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、鐘祥網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為鐘祥等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

首先這里就不講為什么我們要清楚浮動(dòng)，反正不清除浮動(dòng)事多多。

下面我就講三種常用清除浮動(dòng)的方法，夠用了。

1、在浮動(dòng)元素后面加一個(gè)空的div，并為它清除浮動(dòng)

html代碼：

<div class="wrap">
   <div class="float">浮動(dòng)</div>
   <div class="clear"></div>
   <div class="nofloat">不想被浮動(dòng)影響</div>
</div>

css代碼：

.wrap{
  width:500px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
}

現(xiàn)在雖然加了一個(gè)空的div，但是并沒有給它清除浮動(dòng)，所以目前的效果就是第三個(gè)子元素.nofloat還是收到浮動(dòng)的影響。

OK，現(xiàn)在給.clear加上清除浮動(dòng)：

.clear{
    clear:both;
}

刷新一下效果就出來了：

PS：這種情況比較適合元素之間是垂直排列布局的，為了不受彼此浮動(dòng)的影響。

2、利用BFC特性清除浮動(dòng)

html代碼：

<div class="wrap">
   <div class="float">浮動(dòng)</div>
   <div class="nofloat">不想被浮動(dòng)影響</div>
</div>

css代碼：

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
  overflow:hidden;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
    overflow:hidden;
}

效果是這樣的：

這里父容器是沒有設(shè)置固定高度的，本來第一個(gè)子元素浮動(dòng)之后，父元素的高度會(huì)塌陷到跟第二個(gè)子元素一樣高，但由于這里分別給第二個(gè)子元素和父元素都設(shè)置了overflow:hidden ，所以它們都生成了一個(gè)新的BFC區(qū)域，根據(jù)上文提供的BFC布局規(guī)則可以得知：BFC區(qū)域不會(huì)與float box 重疊；計(jì)算BFC高度時(shí)浮動(dòng)元素的高度也參與計(jì)算。所以就得到清除浮動(dòng)的效果。說得比較繞，但其實(shí)清除浮動(dòng)得根據(jù)自己開發(fā)中的實(shí)際情況合理使用。

3、使用：after偽元素，給浮動(dòng)元素的父元素清除浮動(dòng)

html代碼：

<div class="wrap">
   <div class="float">浮動(dòng)</div>
</div>

css代碼：

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}

此時(shí)子元素浮動(dòng)了，脫離了文檔流，所以父元素高度酒塌陷了：

可以看到父元素的邊框擠在一起了。

OK，現(xiàn)在給父元素添加一個(gè)clearfix類：

<div class="wrap clearfix">
   <div class="float">浮動(dòng)</div>
</div>

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:'clear';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}

現(xiàn)在刷新后的效果就是：

這種方法和BFC清除浮動(dòng)個(gè)人用的比較多，實(shí)際開發(fā)中，其實(shí)這兩種就夠用了。

以上是CSS清除浮動(dòng)的方法有哪些的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

文章題目：CSS清除浮動(dòng)的方法有哪些-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://www.yijiale78.com/article10/doccgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信小程序、網(wǎng)站導(dǎo)航、Google、面包屑導(dǎo)航、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)