一個塊格式化上下文（block formatting context）由以下之一創(chuàng)建：

根元素或其它包含它的元素
浮動元素 (元素的 float 不是 none)
絕對定位元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
具有overflow 且值不是 visible 的塊元素，//一般用overflow:hidden
display: flow-root //超級棒的，不會在創(chuàng)建bfc的同時觸發(fā)其他副作用
column-span: all 應當總是會創(chuàng)建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。

功能1：爸爸管兒子
用 BFC 包住浮動元素。(這 TM 不是清除浮動，.clearfix 才是清除浮動）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output爸爸變嚴厲
或者建個墻（border）也可以得到效果的

創(chuàng)建了這個以后，兒子管的嚴嚴的，孫子由兒子管（一個塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級格式化上下文的后代元素內(nèi)的元素）
然后內(nèi)部的兒子之間的豎著的margin會合并（在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由'margin'屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并）
在一個塊格式化上下文中，每個盒的left外邊（left outer edge）挨著包含塊的left邊（對于從右向左的格式化，right邊挨著）。即使存在浮動（盡管一個盒的行盒可能會因為浮動收縮），這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）

功能2：兄弟之間劃清界限
用 float + div 做左右自適應布局
http://js.jirengu.com/felikenuve/1/edit?html,css,output
兄弟之間劃清界線，定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動不會影響其它塊格式化上下文中元素的布局，并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。