BFC--對塊級格式化上下文的理解
阿新 • • 發佈：2018-07-11
http 決定 ble ont 帶來 size text 觸發 文檔流
BFC--對塊級格式化上下文的理解
什麽是formatting contextFormatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。 CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。
什麽是Block Formatting ContextBFC直譯為“塊級格式化上下文”;它是頁面中一個獨立的渲染區域，規定了block-level-box如何布局，並且與該區域外的元素布局互不影響。
- 內部的Box會在垂直方向上一個接一個的放置
- 元素垂直方向的距離由margin決定，即屬於同一個BFC的兩個相鄰盒子的margin可能會發生重疊。
- 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出li的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
- BFC的區域不會與float的元素區域重疊
- 計算BFC的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然
- 根元素或其它包含它的元素
- float屬性不為none
- overflow不為visible
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
1、根據BFC布局規則：“ 屬於同一個BFC的兩個相鄰盒子的margin可能會發生重疊 ” ———— 解決margin重疊
產生折疊的必備條件：必須是處於常規文檔流（非float和絕對定位）的相鄰的塊級盒子,並且處於同一個BFC當中 折疊結果：- a、 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
- b、 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
- c、 兩個外邊距一正一負時，折疊結果是兩者的相加的和。
2、根據BFC布局規則：“ 計算BFC的高度時，浮動元素也參與計算 ” ———— 解決浮動帶來的父級高度坍塌問題
3、根據BFC布局規則：“ BFC的區域不會與float的元素區域重疊 ” ———— 實現自適應兩欄布局
BFC--對塊級格式化上下文的理解