浮動，絕對定位元素，inline-blocks,table-cells,table-captions,和overflow的值不為visible的元素，（除了這個值已經被傳到了視口的時候）將創建一個新的塊級格式化上下文。
一個BFC是一個HTML盒子并且至少滿足下列條件中的任何一個：
?浮動元素（float: left | right）；
?絕對定位元素（position:?absolute?|?fixed）；
?行內塊元素（display:?inline-block）；
?表格的單元格（display:?table-cells，TD、TH）；
?表格的標題（display:?table-captions，CAPTION）；
?'overflow'?特性不為visible?的元素（除非該值已經傳播到viewport?）；
BFC布局規則：
內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
BFC的主要作用及原理
1.自適應兩欄式
2.清除浮動
總結
因為BFC內部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。
