我們在平常做項目的時候，float這個css屬性經常會用到。元素浮動會讓元素脫離文檔流，從而不能撐開父級的內容。今天我將展示常見的清除浮動的方法。
什么是浮動
浮動元素脫離文檔流并且向左或者向右移動，直到浮動元素的邊緣碰到父級框或者另一個浮動元素的邊框為止。
浮動的影響
浮動元素會使得父級元素高度塌陷
html:
<ul><li></li><li></li><li></li>
</ul>css:
* { // 實際項目中不要用通配符*去設置樣式margin: 0;padding: 0;
}
ul {border: 10px solid red;
}
li {width: 100px;height: 100px;margin-left: 10px;list-style: none;background: orange;float: left;
}效果圖：
由于浮動元素脫離文檔流，不再占據原來的文檔流空間，不能撐開父級的內容，所以父級的高度就不存在了。
下面我們將介紹清浮動的兩個大類。
清浮動的方法
clear清浮動（clearfix方案）
在css中專門有一個來解決高度塌陷的屬性，那就是我們常用的clear屬性。clear的用法如下：
clear: none | right | left | both | inherit;下面對clear值的解釋來之w3c
- none：默認值。允許浮動元素出現在兩側。
- right：在右側不允許浮動元素。
- left：在左側不允許浮動元素。
- both：在左右兩側均不允許浮動元素。
- inherit：規定應該從父元素繼承 clear 屬性的值。
我們清除浮動的時候常用
clear: both;下面展示一個與clear值為both有關的例子。
html:
<ul><li></li><li></li><li></li><li></li><li></li>
</ul>css:
* {margin: 0;padding: 0;
}
li {width: 100px;height: 100px;margin-left: 10px;list-style: none;background: orange;float: left;margin-bottom: 10px;
}
li:nth-child(3) {clear: both;
}上面代碼所渲染出來的效果是下面的圖：
不知道當大家看到這個結果的時候，是不是開始懷疑w3c中的解釋了。實際上clear值為both指的是讓自身和前面的浮動元素不相鄰。沒錯，是前面的，并不是前面后面都兼顧，所以上面的例子中展示的效果是兩列而不是三列。
下面展示使用clear清浮動，接著最開始的代碼，我們對其進行清浮動。(注意下面只展示在最開始代碼中增加的代碼)
css:
ul {zoom: 1; // 為了兼容IE6/7
}
ul:after { // 內聯content: ''; // 內容為空字符是為了不影響本來的domdisplay: block; // 這里的值也可以是table | list-item，只要能夠讓偽類成為塊級元素。clear: both;
}效果圖：
BFC清浮動
BFC的全稱block formatting context，中文意思是“塊級格式化上下文”。
BFC特性
“css世界的結界”（引自張鑫旭的《css世界》），在這個結界中內部子元素不管如何變化都不會對外部的元素有影響。BFC元素的margin不會發生折疊，因為margin折疊影響外部元素的布局。清除浮動，如果BFC不能夠清除浮動，那么BFC元素高度就會塌陷，那么內部的元素就會影響到其他的元素的布局，這跟前面說的BFC元素內部的子元素不會影響外部元素相違背。
BFC的實現：（引自張鑫旭的《css世界》）
- 根元素
- float的值非none
- overflow的值為auto、scroll、hidden
- display的值為table-cell、table-caption和inline-block
- position的值不為relative和static
css:
ul {overflow: auto; // 使浮動元素的父級成為BFC就行可以實現清浮動
}效果如下圖：
大家有可能會有疑問只要一句話實現BFC，那為什么我們還要用上面的clearfix方案？
overflow: auto;overflow: hidden;但是，大家想下現在使用IE6/7/8的用戶還有好多。我個人覺得現在我們沒必要去管IE6/7/8，拋棄那部分用戶對于我們的影響微不足道。上面這段話只是個人想法，并沒有想過讓他人必須這樣想，如果大家對這段有什么不滿請輕噴。
最后建議大家不要一味的使用clearfix方案。
