BFC 塊級元素格式化上下文

block formatting contexts： 塊級元素格式化上下文

塊級元素如何對它的內容（子元素：也是乙個塊元素）進行布局，以及與其它元素（與內容同級別）的關係和相互作用

普通文件流的布局規則

1、浮動的元素是不會被父級計算高度

2、非浮動元素會覆蓋浮動元素的位置

3、margin會傳遞給父級

4、兩個相鄰的元素上下margin會重疊

bfc的布局規則

1、浮動的元素會被父級計算高度(父級觸發了bfc)

2、非浮動元素不會覆蓋浮動元素的位置（非浮動元素觸發了bfc）

3、margin不會傳遞給父級（父級觸發了bfc）

4、兩個相鄰的元素上下margin不會重疊（給其中乙個元素新增乙個單獨的父級，然後讓他的父級觸發了bfc）

觸發bfc的方式（以下任意一條就可以）

1、float的值不為none

2、overflow 除了 visible 以外的值（hidden，auto，scroll）

3、display的值為table-cell、table-caption和inline-block之一

4、絕對定位元素，position（absolute，fixed）； 

bfc的應用

1、包含浮動元素 

問題案例：高度塌陷問題：在通常情況下父元素的高度會被子元素撐開，而在這裡因為其子元素為浮動元素所以父元素發生了高度坍塌，上下邊界重合。這時就可以用bfc來清除浮動了。 

2、不被浮動元素覆蓋 

問題案例： div浮動兄弟遮蓋問題：由於左側塊級元素發生了浮動，所以和右側未發生浮動的塊級元素不在同一層內，所以會發生div遮擋問題。可以給藍色塊加 overflow: hidden，觸發bfc來解決遮擋問題。

3、 bfc 會阻止外邊距摺疊 

問題案例：margin塌陷問題：在標準文件流中，塊級標籤之間豎直方向的margin會以大的為準，這就是margin的塌陷現象。可以用overflow：hidden產生bfc來解決。 

塊格式化上下文 BFC

塊格式化上下文 block formatting context，bfc 是web頁面的可視css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。塊格式化上下文包含建立它的元素內部的所有內容.塊格式化上下文對浮動定位 參見float 與清除浮動 參見clear 都很重要...

塊級格式化上下文（BFC）

最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...

BFC 塊級格式化上下文

bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...