父元素高度坍塌，父元素浮動子元素會浮動嗎_為什么quot;overflow:hiddenquot;能清除浮動的影響

來源 | https://www.jianshu.com/p/7e04ed3f4bea

我們都知道"overflow:hidden"可以溢出隱藏，即當內容元素的高度大于其包含塊的高度時，設置該屬性即可把內容區域超出來的部分隱藏，使內容區域完全包含在該包含塊中。然而"overflow:hidden"還有另外一個特殊的用途，那就是清除包含塊內子元素的浮動。我們先來看一個實例：

//html

// css.parent{width:300px; background:#ddd; border:1px solid;} .child1{ width:100px; height:100px; background:pink;float:left;}.child2{ width:200px; height:50px; background:red;}

結果：上面的例子中，我們沒有設置.parent的高度，所以.parent的高度默認為auto。由于.child1設置了浮動，脫離了文檔流，所以.parent中只有.child2這一個文檔流元素。現在我們給.parent添加"overflow:hidden"：

.parent{overflow: hidden; }

結果：我們看到，給父元素添加一句"overflow:hidden"，就能讓父元素包住這個脫離了文檔流的浮動元素，換句話說，"overflow:hidden"可以清除包含塊內子元素的浮動的影響。現在我們看到了現象，可是原因是什么呢？在解釋這個問題之前，我們先了解一下BFC的概念。

BFC

BFC(Block Formatting Context)，塊級格式化上下文，它規定了內部的塊級元素的布局方式，默認情況下只有根元素(即body)一個塊級上下文。

1、BFC布局規則

• 內部的塊級元素會在垂直方向，一個接一個地放置；
• 塊級元素垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰的塊級元素會發生margin合并，不屬于同一個BFC的兩個相鄰的塊級元素不會發生margin合并；
• 每個元素的margin box的左邊，與包含border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此；
• BFC的區域不會與float box重疊；
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素；外面的元素也不會影響到容器里面的子元素；
• 計算BFC的高度時，浮動元素也參與計算。

2、創建一個BFC

首先我們要知道怎樣創建BFC。一個BFC可以被顯式觸發，只需滿足以下條件之一：

• float的值不為none；
• overflow的值不為visible；
• position的值為fixed / absolute；
• display的值為table-cell / table-caption / inline-block / flex / inline-flex。

3、BFC的應用

1)、消除margin合并

在margin合并這篇博客中，我描述了相鄰兄弟元素、父元素與第一個和最后一個子元素、空塊元素的margin合并情況。那么對于發生margin合并的元素，我們怎樣消除margin合并？對于父子元素，我們可以通過設置padding、border、inline content、height、min-height、max-height等屬性來消除；但是相鄰的兄弟元素之間必出現margin合并，這時如果想要消除margin合并，又該怎么辦？我們首先要搞清楚為什么會發生margin合并。這些元素(包括兄弟、父子元素等)之間之所以會發生margin合并，是因為它們屬于同一個BFC。所以，我們就知道怎么辦了，只要讓它們不屬于同一個BFC不就可以了？我們來看在margin合并這篇博客中舉過的一個例子：

// html    

// cssbody{  margin:0;  padding:0;}.bro1{  width:300px;  height:200px;  background:#ddd;  margin-bottom:30px;}.bro2{  width:200px;  height:100px;  background:pink;  margin-top:20px;}

結果：現在我們給.bro1新建一個BFC，并添加 overflow:hidden;，修改代碼如下：

// html    

// css.special{  overflow:hidden;}

結果：你看！margin合并消除了！

2)、包含浮動子元素

這也是我們今天的主要議題——為什么"overflow:hidden"能清除浮動的影響。我們經常會在父元素里設置某個子元素浮動。浮動后，子元素脫離了文檔流，使得父元素無法包住這個浮動的子元素。我們通常在父元素上設置一個clearfix的偽元素來清除浮動；同樣，我們可以利用BFC可以包含浮動這一特性來清除浮動，例子已經在本文開頭講過。我們對本文開頭的例子作一個分析：當給.parent設置"overflow:hidden"時，實際上創建了一個超級屬性BFC，此超級屬性反過來決定了"height:auto"是如何計算的。在“BFC布局規則”中提到：計算BFC的高度時，浮動元素也參與計算。因此，父元素在計算其高度時，加入了浮動元素的高度，“順便”達成了清除浮動的目標，所以父元素就包裹住了子元素。除了給.parent設置"overflow:hidden"，我們還可以設置"display:inline-block"、"position:absolute"、"float:left"等方式來創建一個BFC，從而達到包裹浮動子元素的效果(具體使用哪種方法要看項目需求)：

// css.parent{  /* 具體使用哪個要看界面設計的情況 */  /* overflow: hidden; */  /* display:inline-block; */  /* position:absolute; */  float:left;}

結果：好了，關于這個問題就總結到這里。CSS的很多屬性看似簡單，深究起來才發現自己了解的僅僅只是冰山一角，前端之路，道阻且長啊！由于個人水平有限，博客錯誤之處，煩請指正！

參考資料：1、理解CSS中BFC2、BFC神奇背后的原理3、知乎：CSS中為什么overflow:hidden能清除浮動(float)的影響？原理是什么？