深入清除浮動原理

瀟湘待雨發表於2018-05-15

關於浮動

設定為浮動的元素會脫離當前文件流,向左或向右移動直到邊緣遇到另一個浮動元素或者到達邊界。普通元素不會對齊造成影響。
浮動是把雙刃劍,在給我們的佈局帶來便利的同時有一些缺點需要我們去解決。例如最常見的父元素塌陷。如下圖所示:

.warper{
    width: 200px;
    border:1px solid  #ff6633;
}
.float-1{
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.float-2{
    float: left;
    background: #ff0;
    height: 50px;
    width: 100px;
}
//html  
<div class='warper'>
    <div class="float-1"></div>
    <div class="float-2"></div>
</div>
複製程式碼
深入清除浮動原理 可以看到父元素的高度為0,為了解決這種狀況就要清除浮動了。

清楚浮動的方式

總結了一下,大致有如下幾類:

1. 結尾空元素或者after等偽元素或者br 來clear
2. 父元素同樣浮動
3. 父元素設定overflow為hidden或者auto 
4. 父元素display:table       
複製程式碼

大致歸類,可以分為兩大類,1使用clear的屬性,後面的可以歸為一類,都是通過觸發BFC來實現的。 下面詳細看一下這兩大類清除浮動的方式及原理。

clear屬性

clear 屬性規定元素盒子的邊不能和浮動元素相鄰。該屬性只能影響使用清除的元素本身,不能影響其他元素。
換而言之,如果已經存在浮動元素的話,那麼該元素就不會像原本元素一樣受其影響了。 第一種方式裡我們的填補元素(我自己的稱呼),就是起這種作用。

//這裡當然可以換成一個空的div,<br/>等,原理和效果都是一致的  
.warper:after {
    content: '';
    height: 0;
    display: block;
    clear: both;
} 
複製程式碼

此時after偽元素設定clear:both之後表明,我兩邊都不能接受浮動元素,原本受浮動元素影響,偽元素的位置在浮動元素下方如圖: 深入清除浮動原理

這樣顯然也不能撐起父元素的高度。設定之後,需要重新安排安排了。
既然兩邊都不接受浮動元素,但浮動元素位置也確定了,那隻能把偽元素放在下邊,如圖:
深入清除浮動原理

可以看到,偽元素的位置在最下方了,距頂部的高度為float元素的高度,順帶撐起了父元素的高度。
同樣適用其他填充元素(display為block),都能達到相同的目的。
在看後面幾種原理之前我們需要先看一下BFC的定義。

BFC

塊級格式化上下文:BFC(block formatting contexts)

照本宣科的定義看起來可能不大好理解,BFC是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box如何佈局,並且與這個區域外部毫不相干。
借用張鑫旭大大的一句話,BFC元素特性表現原則就是,內部子元素再怎麼翻江倒海,翻雲覆雨都不會影響外部的元素。
所以,避免margin穿透啊,清除浮動什麼的也好理解了。

正如下面的解釋:

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats)
在BFC中,每個盒子的左外邊框緊挨著包含塊的左邊框(從右到左的格式,則為緊挨右邊框)。即使存在浮動也是這樣的(儘管一個盒子的邊框會由於浮動而收縮),除非這個盒子的內部建立了一個新的BFC浮動,盒子本身將會變得更窄)。

BFC的特性

  1. 塊級格式化上下文會阻止外邊距疊加
  2. 塊級格式化上下文不會重疊浮動元素
  3. 塊級格式化上下文通常可以包含浮動

換句話說建立了 BFC的元素就是一個獨立的盒子,裡面的子元素不會在佈局上影響外面的元素,反之亦然
同時BFC任然屬於文件中的普通流。所以呢浮動也就解決了,關於BFC以後要專門搞個文章仔細研究一下。

看到這裡就可以知道了,為什麼可以拿來清除浮動了,表現為BFC的元素都是一個十分個性的存在,無論裡面怎麼折騰,對外表現始終如一。
大家肯定可以猜到,上面幾種利用了BFC的清除方式肯定是觸發了BFC的條件,讓父元素變為BFC。我們來看一下觸發BFC的條件,看是不是如我們所想。

BFC觸發條件

CSS3裡面對這個規範做了改動,稱之為:flow root,並且對觸發條件進行了進一步說明。

float 除了none以外的值 
 
overflow 除了visible 以外的值(hidden,auto,scroll ) 
 
display (table-cell,table-caption,inline-block) 
 
position(absolute,fixed) 
 
fieldset元素
複製程式碼

由上面可以對比一下,我們提到那幾種方法,就是觸發了BFC而已。
看個例子

.warper{
    width: 200px;
    border:1px solid  #ff6633;
    // 下面屬性任選其一
    overflow: hidden;
    overflow: auto;
    float: left;
    display:inline-block;
    position: fixed;
}
複製程式碼
深入清除浮動原理

結束語

參考文章

CSS深入理解流體特性和BFC特性下多欄自適應佈局
理解CSS中BFC

到這裡清除float相關的內容就說完了,知其然更要知其所以然,清除float的方式繁多無比,掌握其中原理才能不人云亦云。當然拋磚引玉,更多的是共同學習共同進步,更多請移步部落格

相關文章