CSS如何清除浮動？ 3種方法介紹-css教學-PHP中文網

CSS如何清除浮動？ 3種方法介紹

青灯夜游

發布： 2020-08-21 10:04:19

轉載

3046 人瀏覽過

CSS如何清除浮動？本篇文章為大家介紹一下使用CSS清除浮動的3種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

CSS如何清除浮動？ 3種方法介紹

首先這裡就不講為什麼我們要清楚浮動，反正不清除浮動事多多。

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

1、在浮動元素後面加上一個空的div，並為它清除浮動

##html程式碼：

<div class="wrap">
   <div class="float">浮动</div>
   <div class="clear"></div>
   <div class="nofloat">不想被浮动影响</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;
}

登入後複製

現在雖然加了一個空的div，但是並沒有給它清除浮動，所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。

CSS如何清除浮動？ 3種方法介紹

#OK，現在給.clear加上清除浮動：

.clear{
    clear:both;
}

登入後複製

刷新一下效果就出來了：

CSS如何清除浮動？ 3種方法介紹

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

2、利用BFC特性清除浮動

html程式碼：

<div class="wrap">
   <div class="float">浮动</div>
   <div class="nofloat">不想被浮动影响</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;
}

登入後複製

效果是這樣的：

CSS如何清除浮動？ 3種方法介紹

這裡父容器是沒有設定固定高度的，本來第一子元素浮動之後，父元素的高度會塌陷到跟第二個子元素一樣高，但由於這裡分別給第二個子元素和父元素都設定了overflow:hidden ，所以它們都產生了一個新的BFC區域，根據上文提供的BFC佈局規則可以得知：BFC區域不會與float box 重疊；計算BFC高度時浮動元素的高度也參與計算。所以就得到清除浮動的效果。說得比較繞，但其實清除浮動得根據自己開發中的實際情況合理使用。

3、使用：after偽元素，給浮動元素的父元素清除浮動

html程式碼：

<div class="wrap">
   <div class="float">浮动</div>
</div>

登入後複製

css程式碼：

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

登入後複製

此時子元素浮動了，脫離了文件流，所以父元素高度酒塌陷了：

CSS如何清除浮動？ 3種方法介紹

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

OK，現在為父元素新增一個clearfix類別：

<div class="wrap clearfix">
   <div class="float">浮动</div>
</div>

登入後複製

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

登入後複製

現在刷新後的效果是：

CSS如何清除浮動？ 3種方法介紹 ##這種方法和BFC清除浮動個人用的比較多，實際開發中，其實這兩種就夠用了。