overflow:hidden清除浮動原理解析及清除浮動經常使用方法總結

最近在看《CSS Mastery》這本書，裏面有用overflow：hidden來清理浮動的方法。可是一直想不明白爲何可以實現清除浮動，查閱了網絡上的解釋，下面來總結一下。

1、首先來想一想

咱們你們理解的overflow:hidden是超出該元素的部分進行隱藏。這個時候就須要明確一點，該元素的高度是怎麼定義的。當一個div中的兩個元素浮動以後，此時div的高度就會塌陷，此時div的高度爲0。那是否是意味着就要將浮動元素隱藏起來，若是是真的隱藏就是反佈局常識的。因此這中間確定有咱們如今還不知道的機制。

2、不瞭解的機制-BFC

定義：BFC（Block Formatting Context）全稱是塊級格式化上下文，用於對塊級元素排版，默認狀況下只有根元素（body）一個塊級上下文，可是若是一個塊級元素設置了float:left,overflow:hidden或position:absolute樣式，就會爲這個塊級元素生產一個獨立的塊級上下文，使這個塊級元素內部的排版徹底獨立。

做用：獨立的塊級上下文能夠包裹浮動流，所有浮動子元素也不會引發容器高度塌陷，就是說包含塊會把浮動元素的高度也計算在內，因此就不用清除浮動來撐起包含塊的高度。

3、總結清除浮動的方法

我常常用到的清除浮動的方法有

一、添加額外標籤設置clearfix類爲clear:both;

　　原理是這個空的div能讓父級獲取到高度，是由於設置以後這個div的左右都不能有浮動元素，因此這個空的div元素會向下移動，直到換行，而爲了讓這個div可以換行，父元素至少要包含浮動元素的高度才能提升足夠的空間，這樣實現清除浮動的影響。

二、設置父元素爲浮動元素

三、設置position:absolute

我不經常使用的清除浮動的方法有

一、父級div定義height

三、overflow:hidden

二、父級div定義僞類:after和zoom;

　　這個方法的原理還不理解，歡迎大神解答。

4、清除浮動的影響方法分類

參考張鑫旭老師的說法，清除浮動的說法是不許確的。應該是爲清除浮動的影響。我也以爲張老師的說法是正確的，由於float:none才叫清除浮動。張老師還說到了包裹的這個概念，根據這個概念將清除浮動的影響的方法分爲兩大類。

一類是clear:both/left/right，這就不用說了。

另外一類是：包裹清除，由於他發現浮動、絕對定位、inline-block、overflow都有自適應元素寬度的特性，就想到了用包裹來形容。