bfc 即塊級格式上下文（block formatting context），它是指乙個獨立的塊級渲染區域，只有block-level的box參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。
css2.1規定滿足一下條件之一就會生成bfc：
根元素float的值不為none
overflow的值不為visible
position的值為fixed或absolute
display的值為table-cell / table-caption / inline-block / flex / inline-flex
上面說了，生成bfc的區域會有一套渲染規則來約束塊級盒子內的布局；這些約束規則如下：
內部的塊級元素會在垂直方向，乙個接乙個地放置
每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明bfc中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
塊級元素垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰的塊級元素會發生margin合併，不屬於同乙個bfc的兩個相鄰的塊級元素不會發生margin合併；
bfc的區域不會與float的元素區域重疊
計算bfc的高度時，浮動子元素也參與計算
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素；外面的元素也不會影響到容器裡面的子元素
說了一通bfc的觸發條件和布局規則，初次接觸的可能很不容易理解；下面用這些bfc布局規則來舉例幾個常見的css規則和技巧就很容易明白了~
- 第一點與第二點很好理解，就不舉例子細述了。
依據第三點規則：位於同一bfc內的塊級元素會發生外邊距合併；那麼，要解決這個問題，讓原先這兩個相鄰的兩個元素不在同一bfc內就可以了。 為其中乙個塊建立新的bfc：
這個規則還可以作為多欄布局的一種實現方式。
CSS中的BFC詳解
一 何為bfc bfc block formatting context 格式化上下文，是web頁面中盒模型布局的css渲染模式，指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素 float除none以外的值。2 定位元素 position absoluted,fi...
CSS中的BFC詳解
引言 一 何為bfc bfc block formatting context 格式化上下文，是web頁面中盒模型布局的css渲染模式，指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素，float 除 none 以外的值 2 定位元素，position absolu...
CSS中重要的BFC
css中有個重要的概念bfc，搞懂bfc可以讓我們理解css中某些原本看似詭異的地方。在解釋bfc之前，先說一下文件流。我們常說的文件流其實分為定位流 浮動流 普通流三種。而普通流其實就是指bfc中的fc。fc formatting context 直譯過來是格式化上下文，它是頁面中的一塊渲染區域，...