深入BFC塊級格式化上下文

Box:CSS佈局的基本單位
BOX是CSS佈局的對象和基本單位，直觀的說，一個頁面由很多歌BOX組成，元素的類型和display屬性決定了這個BOX的類型。不同類型的BOX，會參與不痛的formatting context，因此BOX內的元素會以不同的方式渲染。

• block-level box：下有介紹
• inline-level box：display屬性爲inline，inline-block，inline-table的元素等……
• run-in box:css3中有

BFC：塊級格式化上下文。它是一個獨立的渲染區域，只有Block-level box參與，規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。常說的文檔流分爲定位流、浮動流和普通流三種。而普通流其實就是指BFC中的FC(Formatting context格式化上下文)。常見的FC有BFC（塊級格式化上下文）、IFC（行級格式化上下文）、GFC（網格佈局格式化上下文）和FFC（自適應格式化上下文）；

觸發BFC的條件或元素：
- 根元素，HTML元素
- float：left、right
- overflow的值不爲visible
- display的值爲inline-block、table-cell、table-caption
- position的值爲absolute或fixed

BFC的佈局規則：

• 內部BOX在垂直放下，一個接一個放置；
• BOX垂直方向的距離由margin決定。屬於同一個BFC兩個相鄰的BOX的margin會發生重疊（坍塌）
• 每個元素的margin box的左邊，與包含塊border box的左邊相接觸。即使浮動
• BFC的區域不會與float box重疊
• BFC就是頁面上的一個隔離的獨立容器，容器子元素不會影響到外面的元素，反之亦然
• 計算BFC的高度，浮動元素也參與計算

BFC的應用：
- 自適應兩欄佈局】‘
- 組織元素被浮動元素覆蓋
- 包含浮動元素——清楚內部浮動
- 阻止margin坍塌
- 在線應用網站http://www.cnblogs.com/xiaohuochai/p/5248536.html#undefined