一、什么是BFC
具有BFC屬性的元素也屬於普通流定位方式，與普通容器沒有什么區別，但是在功能上，具有BFC的元素可以看做是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，並且具有普通容器沒有的一些特性，比如包含浮動元素，以防止出現高度塌陷問題。
總之，BFC就是一種屬性，這種屬性會影響着元素的定位及與其兄弟元素之間的相互作用。
二、BFC的用途
從整體上看，BFC是隔離了的容器：
1、BFC會阻止外邊距折疊
折疊：兩個相鄰的盒子（可能是兄弟關系也可能是祖先關系）的垂直外邊距可以合並成一個單獨的垂直外邊距。這種合並外邊距的方式被稱為折疊。
在同一個BFC中，兩個相鄰的塊級元素在垂直方向上的外邊距會發生疊加，具體的疊加規則如下：
- 當兩個塊級元素的外邊距都為正數時，取較大者
- 當兩個塊級元素的外邊距都為負數時，取較大者
- 當一正一負時，為兩者的和
根據上面的定義可知，發生折疊的條件是：兩個塊級元素位於同一個BFC中，因而要阻止外邊距折疊只需要產生新的BFC。
創建了BFC的元素，不和它的子元素發生外邊距折疊。 因而如果同一級中的塊級元素發生折疊情況(兄弟關系)，不能在元素本身上產生BFC屬性，而應該給任意一個元素新建一個BFC容器(新增父級元素並設置為新的BFC，例如設置overflow:hidden;)。如果是祖先關系，則只需要觸發父級BFC。
A、兄弟關系外邊距折疊
<!--兄弟關系折疊-->
<head>
<style>
div:nth-child(1){
margin:20px;
}
div:nth-child(2){
margin:40px;
}
div:nth-child(3){
margin:20px;
}
</style>
</head>
<body>
<div style="width:100px;height:100px;background:#123;"></div>
<div style="width:100px;height:100px;background:#496;"></div>
<div style="width:100px;height:100px;background:#789;"></div>
</body>
/*兄弟關系阻止折疊方法*/
<head>
<style>
.newBFC{
margin:40px;
overflow: hidden;
}
</style>
</head>
<body>
<div style="width:100px;height:100px;background:#123;margin:20px;"></div>
<!-- newBFC類表示的仍然和上下兩個div在同一個BFC容器中，因而仍舊會發生外邊距折疊。不過其子元素已經位於另外一個BFC容器中，其與父元素的邊距不會折疊 -->
<div class="newBFC">
<div style="width:100px;height:100px;background:#496;margin:20px;"></div>
</div>
<div style="width:100px;height:100px;background:#789;margin:20px;"></div>
</body>
B、祖先關系折疊
<!--外層div與內層div的垂直外邊距margin合並了-->
<div style="margin:30px">
<div style="width:100px;height:100px;background:red;margin:30px"></div>
</div>
<!--將觸發父級BFC屬性，就不會合並垂直外邊距了-->
<div style="margin:30px；overflow:hidden;">
<div style="width:100px;height:100px;background:red;margin:30px"></div>
</div>
2、BFC可以包含浮動元素
<div style="border:2px solid red;">
<div class="child" style="width:100px;height:100px;background:#565;"></div>
</div>
未給child加float屬性前：
給child加float屬性后：
從上面兩個對比圖可以發現，加了float屬性后，包含child類的div脫離普通/標准文檔流，外層div高度塌陷。
觸發BFC
<div style="border:2px solid red;overflow: hidden;">
<div style="width:100px;height:100px;background:#565;float: right;"></div>
</div>
使用overflow: hidden;觸發BFC屬性，就可以承載具有float屬性的元素了。
3、BFC可以阻止元素被浮動元素覆蓋
浮動元素的塊級兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣就會被浮動元素覆蓋，為該兄弟元素觸發BFC后可以阻止這種情況的發生。經常在布局中使用。
<div style="width:100px;height:300px;background-color: #860;float: left;"></div>
<div style="width:400px;background-color: #395;">
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
</div>
觸發BFC
<div style="width:100px;height:300px;background-color: #860;float: left;"></div>
<div style="width:400px;background-color: #395;overflow: hidden;">
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
</div>
三、如何觸發BFC
- 浮動元素：float除none以外的值
- 絕對定位元素：position(absolute、fixed)
- display為以下其中之一的值inline-block、flex、inline-flex、table-cell、table-caption
- overflow除了visible以外的值(hidden、auto、scroll)