BFC是Block Formatting Context的縮寫，直譯過來就是“塊級格式化上下文”。先不管它到底是什麼，看一個例子： 結果： 想必大家都瞭解，子元素float時父容器是不會被撐開高度的。一般的解決方法是給父容器加上 .clearFix類， 清除浮動後，父容器能自動獲得正確的高度了： 現 ...
BFC是Block Formatting Context的縮寫，直譯過來就是“塊級格式化上下文”。先不管它到底是什麼，看一個例子：
.parent{
border: 1px solid blue;
}
.children{
width: 100px;
height: 100px;
background: red;
float: left;
margin: 10px;
}
<div class="parent">
<div class="children"></div>
<div class="children"></div>
</div>結果：
想必大家都瞭解，子元素float時父容器是不會被撐開高度的。一般的解決方法是給父容器加上 .clearFix類，
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}清除浮動後，父容器能自動獲得正確的高度了：
現在通過BFC，可以用更簡單的方法解決這個問題了，只需要在父容器的樣式裡加上一句 overflow: hidden :
.parent{
border: 1px solid blue;
overflow: hidden;
}
原理：塊級元素使用 overflow: hidden 的時候會創建一個 BFC ,而計算BFC的高度時，浮動元素也會參與計算。
BFC還有另外一個非常重要的特性，那就是垂直方向的外邊距重疊，還是之前那兩個div,樣式改為:
.children{
width: 100px;
height: 100px;
background: red;
margin: 50px 10px;
overflow: hidden;
}我們為兩個div設置了上下50px的外邊距，按理來說兩個div的距離應該是100px；然而事與願違，
上邊div的margin-bottom與下邊div的margin-top重疊了。
當然，BFC的特性不止這些，創建BFC的方法也不只有overflow: hidden。
BFC元素的特性
參考w3-CSS2規範,9.4.1節，總結如下：
1 內部的Box會在垂直方向從上到下排列。
2 內部的Box會在水平方向從左到右排列（對於從右到左的格式化則相反）。即使存在浮動也是如此。
3 Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生摺疊
4 BFC的區域不會與float box疊加。這條後邊會解釋
5 BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之亦然。
6 計算BFC的高度時，浮動元素也參與計算。
哪些元素會創建BFC？
- 根元素
- float元素
- 絕對定位元素（position屬性為absolute或fixed）
- 不是塊級框的元素（display屬性為inline-block, table-cell, table-caption等）
- overflow屬性不為visible的元素
BFC的應用場景
1 閉合浮動 即前邊父容器獲取高度問題，不再介紹了 註意這裡不叫清除浮動，因為BFC元素可以包含浮動元素，並且浮動元素也參與計算高度。
2 防止垂直 margin 重疊
前邊提到的垂直外邊距摺疊問題，可以通過給子元素外層包裹一個BFC塊，像這樣：
<div class="parent">
<div class="children"></div>
<div class="BFC">
<div class="children"></div>
</div>
</div>這樣之前的兩個children塊便不屬於同一個BFC了。但是一般不建議濫用BFC來解決此類問題，推薦使用同向的margin-top，margin-bottom來解決。
3 多列佈局
前邊BFC特性第4條提到了，BFC的區域不會與float box疊加，這句話是什麼意思呢，看一個例子：
.food{
width: 100px;
height: 100px;
float: left;
}
<div class="container">
<img class="food" src="food.png">
<p class="BFC">商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹
商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹
商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹
商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹
商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹
商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹
商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹
商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹
</p>
</div>
當我們展示一張圖片和介紹性文字的時候，一般會給圖片加上float屬性，但是有時候這種文字環繞的方式不是我們要的效果，怎麼將圖片和文字變成兩列式佈局呢？很簡單，給文字的容器p元素創建一個BFC。
.BFC{
overflow: hidden;
}
使用BFC，很簡單方便的就將效果實現了。
圖片和文字過於緊湊顯然不夠美觀，我們給圖片和文字設置20px的間距。如果直接給文字塊設置左邊距，需要將圖片的寬度計算在內，即120px，這種方式顯然不好。這種情況我們只需給浮動的元素設置一個20px的右邊距即可。
.food{
width: 100px;
height: 100px;
float: left;
margin-right: 20px;
}
總結
- BFC是指塊級格式化上下文，它是一個獨立的渲染區域，內部的元素佈局方式與外部無關；
- 主要特點是相鄰元素間垂直方向的外邊距會被摺疊，以及內部的浮動元素會參與計算高度；
- 主要用途是閉合浮動使父容器自動獲得高度，以及實現多列佈局。
個人理解僅供參考，如有錯誤歡迎指正。
