關於BFC

1.什麼是BFC？

所謂BFC就是blocking formatting context塊級格式上下文。它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

對一個元素設置CSS，首先須要知道這個元素是block仍是inline類型。而BFC就是用來格式化塊級盒子，一樣管理inline類型的盒子還有IFC，以及其餘的FC。

2.那麼什麼叫FC？

FC就是Formatting Context，指頁面中的一個渲染區域，而且擁有一套渲染規則，他決定了其子元素如何定位，以及與其餘元素的相互關係和做用。

3.Box: CSS佈局的基本單位

　　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 中才有， 這兒先不講了。

4.BFC的生成

　　BFC是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大，這些由生成BFC的元素決定

　　CSS2.1中規定知足下列CSS聲明之一的元素便會生成BFC。

• 根元素
• float的值不爲none
• overflow的值不爲visible
• display的值爲inline-block、table-cell、table-caption
• position的值爲absolute或fixed

　　把display：table也認爲能夠生成BFC，其實這裏的主要緣由在於Table會默認生成一個匿名的table-cell，正是這個匿名的table-ccell生成了BFC

5.BFC的佈局規則

1. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
2. 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
3. BFC的區域不會與float box重疊。
4. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
5. 計算BFC的高度時，浮動元素也參與計算

參考文檔：

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

 http://www.cnblogs.com/dojo-lzz/p/3999013.html