關於浮動
設置為浮動的元素會脫離當前文檔流，向左或向右移動直到邊緣遇到另一個浮動元素或者到達邊界。普通元素不會對齊造成影響。
浮動是把雙刃劍，在給我們的布局帶來便利的同時有一些缺點需要我們去解決。例如最常見的父元素塌陷。如下圖所示：
.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,為了解決這種狀況就要清除浮動了。
清楚浮動的方式
總結了一下，大致有如下幾類:
- 結尾空元素或者after等偽元素或者br 來clear
- 父元素同樣浮動
- 父元素設置overflow為hidden或者auto
- 父元素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的特性
- 塊級格式化上下文會阻止外邊距疊加
- 塊級格式化上下文不會重疊浮動元素
- 塊級格式化上下文通常可以包含浮動
換句話說創建了 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的方式繁多無比，掌握其中原理才能不人雲亦雲。當然拋磚引玉，更多的是共同學習共同進步,更多請移步博客。