深刻清除浮動原理

關於浮動

設置爲浮動的元素會脫離當前文檔流，向左或向右移動直到邊緣遇到另外一個浮動元素或者到達邊界。普通元素不會對齊形成影響。
浮動是把雙刃劍，在給咱們的佈局帶來便利的同時有一些缺點須要咱們去解決。例如最多見的父元素塌陷。以下圖所示：

.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的方式繁多無比，掌握其中原理才能不人云亦云。固然拋磚引玉，更多的是共同窗習共同進步,更多請移步博客。