一、定義
MDN中是這樣說的：塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是block塊盒子的佈局過程發生的區域，也是浮動float元素與其他元素交互的區域。
是不是看完之後，依然一臉懵逼.....反正我是（苦笑）。簡單地說，BFC 就是某個元素的一個 CSS 屬性，只不過這個屬性不能被開發者顯式的修改，擁有這個屬性的元素對內部元素和外部元素會表現出一些特性，這就是BFC。
二、佈局規則
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算
三、哪些元素會產生BFC?
- 根元素(
<html>) - 浮動元素（元素的
float不是none） - 絕對定位元素（元素的
position爲absolute或fixed） - 行內塊元素（元素的
display爲inline-block） - 表格單元格（元素的
display爲table-cell，HTML表格單元格默認爲該值） - overflow的值不爲visible(hidden、auto、scroll)
- 表格標題（元素的
display爲table-caption，HTML表格標題默認爲該值） - 匿名錶格單元格元素（元素的
display爲table、table-row、table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或inline-table） display值爲flow-root的元素contain值爲layout、content或 paint 的元素- 彈性元素（
display爲flex或inline-flex元素的直接子元素） - 網格元素（
display爲grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width不爲auto，包括column-count爲1） column-span爲all的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug）。
四、經典用法
1、解決外邊距合併問題
當兩個相鄰塊級子元素分屬於不同的BFC時可以阻止margin重疊
操作方法：給其中一個div外面包一個div，然後通過觸發外面這個div的BFC，就可以阻止這兩個div的margin重疊，此處將外部div設置成 overflow: auto;
<body>
<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>
</body>
<style>
.aside {
margin-bottom: 20px;
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 20px;
height: 200px;
background: #fcc;
}
.text {
/*盒子main的外面包一個div，通過改變此div的屬性使兩個盒子分屬於兩個不同的BFC，以此來阻止margin重疊*/
overflow: auto;
}
</style>
2、可以包含浮動元素——清除內部浮動
當兩個子div都設置浮動後，父div不會將下面兩個div包裹，但還是在父div的範圍之內，
<body>
<div class="father">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
.father {
border: 10px solid yellow;
}
.child {
float: left;
height: 200px;
width: 200px;
border: 10px solid tomato;
}
清除浮動：
給父div加上 overflow: hidden，觸發父div的BFC屬性，使下面的子div都處在父div的同一個BFC區域之內，此時已成功清除浮動。
3、自適應兩欄佈局，阻止元素被浮動元素覆蓋
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
body {
width: 900px;
position: relative;
}
.aside {
width: 400px;
height: 150px;
float: left;
background: yellow;
}
.main {
height: 200px;
background: #fcc;
}
aside設置成float:left後，內容會與main部分重疊，通過產生一個新BFC即可實現如下效果。
.main {
overflow: hidden;
height: 200px;
background: #fcc;
}
