1. 程式人生 > >淺談clearfix類和clear清除浮動

淺談clearfix類和clear清除浮動

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-leftcontent-right下,而建立的這個偽類是沒有脫離文件流的,自然能夠撐開父元素wrapper的高度。

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

clear:both

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