之前一直聽說這個概念，使用的時候也一知半解，沒有細細研究，今天又遇到了，來做下小結。
1、什麼是BFC
是Box Formatting Context（塊級格式化上下文）的縮寫，這裏我們需要拆分爲Box、Formatting Context；其中，
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。
Box 是 CSS 佈局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。讓我們看看有哪些盒子：
block-level box:display 屬性爲 block, list-item, table 的元素，會生成 block-level box。並且參與 block fomatting context；
inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。並且參與 inline formatting context；
run-in box: css3 中才有， 這兒先不講了。