CSS浮動會對原本的佈局產生破壞，所以我們會考慮清除浮動產生的影響，本文不談浮動以及各種清除浮動的方法，只討論clearfix類和clear清除浮動。 
在網頁設計中，很常見的一種情況是給內容一個div作為包裹容器，而這個包裹容器不設定高度，而是讓裡面的內容撐開包裹容器的高度。

<div　class="wrapper" >
    <div class="content">
    </div>
</div>
1
2
3
4
上面content裡的內容會把父元素wrapper撐開，但是如果內容區浮動脫離了文件流父元素高度就無法被內容撐開。

<div　class="wrapper" >
    <div class="content-left" style="float:left">
    </div>
    <div class="content-right" style="float:right">
    </div>
</div>
1
2
3
4
5
6
在這種情況下為了讓父元素高度還能夠被子元素撐開，最常見的一種方式就是給父元素新增一個clearfix類

.clearfix:after {
    content: " ";
    display: block;;
    line-height: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}

<div　class="wrapper clearfix" >
    <div class="content-left" style="float:left">
    </div>
    <div class="content-right" style="float:right">
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
這時候父元素就會被子元素內容撐開高度（儘管子元素浮動了），這時父元素div.wrapper高度是Number.MAX(div.content-left.style.height,div.content-right.style.height) 。 
原理很簡單，clearfix類會在wrapper建立一個偽類，並且這個類會清除左右浮動，所以按照佈局會在content-left，content-right下，而建立的這個偽類是沒有脫離文件流的，自然能夠撐開父元素wrapper的高度。

從上面程式碼中我們可以看到.clearfix類用到了

clear:both
1
clear是css中用來清除浮動的，clear有多個屬性值，在專案中常用的是clear:both,這個與clearfix類的區別是.clearfix一般用在浮動元素的父元素上，而clear一般用在浮動元素的平級元素上。

儘管清除浮動的方法有很多，但在專案中常用clearfix類來清除浮動，因為不用新增額外無語義的元素來清除浮動，而且套路固定，容易理解。

clearfix類CSS程式碼：

clearfix::after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden
--------------------- 
作者：TyrionJ 
來源：CSDN 
原文：https://blog.csdn.net/TyrionJ/article/details/78879591 
版權宣告：本文為博主原創文章，轉載請附上博文連結！