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

<div　class="wrapper" >
    <div class="content">
    </div>
</div>

上面content裡的內容會把父元素wrapper撐開，但是如果內容區浮動脫離了文件流父元素高度就無法被內容撐開。

<div
 
　class="wrapper" >
    <div class="content-left" style="float:left">
    </div>
    <div class="content-right" style="float:right">
    </div>
</div>

在這種情況下為了讓父元素高度還能夠被子元素撐開，最常見的一種方式就是給父元素新增一個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>
 

這時候父元素就會被子元素內容撐開高度（儘管子元素浮動了），這時父元素div.wrapper高度是Number.MAX(div.content-left.style.height,div.content-right.style.height) 。
原理很簡單，clearfix類會在wrapper建立一個偽類，並且這個類會清除左右浮動，所以按照佈局會在content-left，content-right下，而建立的這個偽類是沒有脫離文件流的，自然能夠撐開父元素wrapper的高度。

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

clear:both

clear是css中用來清除浮動的，clear

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

clearfix類CSS程式碼：

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