先說說FC，FC的含義就是Fomatting Context。它是CSS2.1規范中的一個概念。
它是頁面中的一塊渲染區域。而且有一套渲染規則，它決定了其子元素將怎樣定位。以及和其它元素的關系和相互作用。BFC和IFC都是常見的FC。
分別叫做Block Fomatting Context 和Inline Formatting Context。
BFC
BFC（Block Formatting Context）叫做“塊級格式化上下文”。BFC的布局規則例如以下：
1.內部的盒子會在垂直方向，一個個地放置；
2.盒子垂直方向的距離由margin決定，
屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊；
3.每一個元素的左邊，與包括的盒子的左邊相接觸，即使存在浮動也是如此；
4.BFC的區域不會與float重疊；
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此；
6.計算BFC的高度時，浮動元素也參與計算。
介紹過了BFC的布局規范，再來說說哪些元素會產生BFC。
1.根元素。
2.float的屬性不為none；
3.position為absolute或fixed；
4.display為inline-block。table-cell，table-caption。flex；
5.overflow不為visible
接下來說說BFC的作用和原理
首先看看
自適應兩欄布局
我們先定義兩個div：
<div class="aside"></div> <div class="main"></div>
然后定義css：
div {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
}
效果圖例如以下：
這正滿足了規范的第三條：
每一個元素的左邊，與包括的盒子的左邊相接觸。即使存在浮動也是如此。
所以假設我們須要將黑色區域撐到紅色的左邊。就須要利用規范的第四條：
BFC的區域不會與float重疊。
也就是說我們須要創造BFC區域。我們通過將紅色區域的overflow設為hidden來觸發BFC：
.main {
overflow:hidden;
height:200px;
background-color:red;
}
完整代碼鏈接：
接下來看看
清除內部浮動
首先是父div套子div
<div class="parent"> <div class="child"></div> </div>
然后是css：
.child {
border:1px solid red;
width:100px;
height:100px;
float:left;
}
.parent {
border:1px solid black;
width:300px;
}
效果例如以下：
能夠看到，父div壓根就沒有被撐開。
我們再回想一下BFC規范中的第六條：
計算BFC的高度時，浮動元素也參與計算。
所以我們須要將父div觸發為BFC，也就是將其overflow設為hidden：
.parent {
border:1px solid black;
width:300px;
overflow:hidden;
}
效果例如以下：
能夠看到父div已經撐開了。
再談談
margin重疊問題。
先定義兩個垂直的div：
<div class="p"></div> <div class="p"></div>
然后定義margin:
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
能夠看到margin重疊后的效果：
我們再看看BFC規范的第二條：
盒子垂直方向的距離由margin決定，屬於用一個BFC的兩個相鄰Box的上下margin會發生重疊。
說明兩者屬於同一個BFC，所以我們須要兩個div不屬於同一個BFC。
為第二個div套一個父親div。然后講其overflow設為hidden來激活一個BFC就能夠使margin不再重疊。
<div class="p"></div> <div class="wrap"> <div class="p"></div> </div>
.wrap {
overflow:hidden;
}
效果例如以下：
