什么要清除浮動？

一開始css的浮動，其本質是用來做一些文字混排效果的，但是后來被我們拿來做布局用，就出現了很多問題。

清除浮動的本質： 為解決父級元素因為子級浮動引起高度為0的問題

我們很多時候不方便給父盒子的高度，因為我們不清除有多少子盒子，有多少內容。經常的做法會讓內容撐開父盒子的高度。 但是如果父盒子中有子盒子浮動了之后，就會影響到后面的盒子，因為浮動元素脫離了標準流。會把后面還在標準流的盒子覆蓋，解決這個問題的方法就要清除浮動

原理圖

如何清除浮動？

清除浮動其實叫做 閉合浮動 更合適，因為是把浮動的元素圈起來，讓父元素閉合出口和入口不讓他們出來影響其他的元素。 在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

選擇器 { clear : 屬性值 ; }
/*屬性值為left,清除左側浮動的影響
  屬性值為right,清除右側浮動的影響
  屬性值為both,同時清除左右兩側浮動的影響*/
復制代碼

1. 額外標簽法

1.1 末尾標簽法

通過在浮動元素的末尾添加一個空的標簽。這是W3C推薦的做法，雖然比較簡單，但是添加了無意義的標簽，結構化比較差，所以不推薦使用。下面三種寫法都適用：

<!--寫法一：直接用style-->
<div style="clear:both"></div>

<!--寫法二：使用clear類-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>

<!--寫法三：可以使用br等別的塊級元素來清除浮動-->
<style>
.clear { clear:both }
</style>
<br class="clear" />

1.2 內部標簽法

把div放進父盒子里，這樣盒子會撐開，一般也不會用。

2. overflow

給父級元素添加overflow樣式方法。

這種方法代碼比較簡潔，可以通過觸發BFC方式，但是因為本身overflow的本質是 溢出隱藏 的效果，所以有的時候也會有一些問題存在，比如內容增多的時候不會自動換行導致內容被隱藏掉，無法顯示出要溢出的元素。

.father {
      overflow: auto;  
    /* 加上這句話，就可以清除浮動   overflow = hidden|auto|scroll 都可以實現*/
  }
復制代碼

3. 偽元素法（最常用）

3.1 使用after偽元素清除浮動

after是在父元素中加一個盒子，這個元素是通過css添加上去的，符合閉合浮動思想，結構語義化正確。 父元素中加一個類名為clearfix 。但是這個方法IE6-IE7不識別，要進行兼容，使用zoom:1觸發hasLayout來清除浮動

代表網站：百度、淘寶、網易等

.clearfix:after{
    content:".";  /*盡量不要為空，一般寫一個點*/
    height:0;     /*盒子高度為0，看不見*/
    display:block;    /*插入偽元素是行內元素，要轉化為塊級元素*/
    visibility:hidden;      /*content有內容，將元素隱藏*/
    clear:both;  
}

.clearfix {
    *zoom: 1;   /*  *只有IE6,7識別 */
}
復制代碼

3.2 after偽元素空余字符法

父元素中加一個類名為clearfix，也需要兼容IE6-IE7

在Unicode字符里有一個“零寬度空格”，即U+200B，代替“.”，可以減少代碼量，不再使用visibility:hidden

代表網站：阿里巴巴

.clearfix::after{
    content:"\200B";   /* content:'\0200'; 也可以 */
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    *zoom: 1; 
}
復制代碼

3.3 使用before和after雙偽元素清除浮動（推薦）

這種方法完全符合閉合浮動思想。給父元素加一個類名為clearfix,需要兼容IE6-IE7

代表網站：小米、騰訊

 .clearfix:before, .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
復制代碼

三種方法總結

?copyright burning.

最后在這里說一下，目前在職web前端開發，如果你現在在學習web前端，在整個前端入門的學習過程當中，有遇見任何關于學習方法，學習路線，學習效率等方面的問題，或者缺乏基礎入門的視頻教程，前端面試題，學習手冊，開發工具，PDF文檔書籍教程，都可以隨時關注并私信我：前端 ，系統自動堅持會發送交流圈子，可以來自行獲取下載。

作者：頑皮的雪狐七七
鏈接：https://juejin.cn/post/6901903789197197325
來源：掘金

天這篇文章給大家介紹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還是收到浮動的影響。

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

.clear{    clear:both;}

刷新一下效果就出來了：

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;}

效果是這樣的：

這里父容器是沒有設置固定高度的，本來第一個子元素浮動之后，父元素的高度會塌陷到跟第二個子元素一樣高，但由于這里分別給第二個子元素和父元素都設置了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;}

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

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

OK，現在給父元素添加一個clearfix類：

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

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

現在刷新后的效果就是：

這種方法和BFC清除浮動個人用的比較多，實際開發中，其實這兩種就夠用了。

好的，清除浮動我也就簡單地提到這里！

以上就是CSS清除浮動的幾種方法的詳細內容。如果有什么錯誤的話，歡迎留言指正。