(節(jié)選自：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html#!comments)
一、BFC是什么？
BFC 定義
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與宠互， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
BFC布局規(guī)則：
- 內(nèi)部的Box會(huì)在垂直方向铝侵，一個(gè)接一個(gè)地放置。
- Box垂直方向的距離由margin決定触徐。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
- 每個(gè)元素的margin box的左邊咪鲜， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)撞鹉。即使存在浮動(dòng)也是如此疟丙。
- BFC的區(qū)域不會(huì)與float box重疊。
- BFC就是頁面上的一個(gè)隔離的獨(dú)立容器鸟雏，容器里面的子元素不會(huì)影響到外面的元素享郊。反之也如此。
- 計(jì)算BFC的高度時(shí)孝鹊，浮動(dòng)元素也參與計(jì)算
二炊琉、哪些元素會(huì)生成BFC?
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
三、BFC的作用及原理
見http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html#!comments
