塊格式化上下文（block formatting context，bfc） 是web頁面的可視css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。
根元素()
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 為 absolute 或 fixed）
行內塊元素（元素的 display 為 inline-block）
**單元格（元素的 display為 table-cell，html**單元格預設為該值）
**標題（元素的 display 為 table-caption，html**標題預設為該值）
匿名**單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是html table、row、tbody、thead、tfoot的預設屬性）或 inline-table）
overflow 值不為 visible 的塊元素
display 值為 flow-root 的元素
contain 值為 layout、content或 paint 的元素
彈性元素（display為 flex 或 inline-flex元素的直接子元素）
網格元素（display為 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
column-span 為 all 的元素始終會建立乙個新的bfc，即使該元素沒有包裹在乙個多列容器中（標準變更，chrome bug）。
同乙個bfc下外邊距會摺疊
bfc可以包含浮動元素（清除浮動）
bfc可以阻止元素被浮動元素覆蓋
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...
BFC塊級格式化上下文
一 bfc理解 bfc block formatting context 塊級格式化上下文。我的理解就是他是乙個獨立的大箱子，箱子內屬於自己的一塊區域，與外界無關 二 如何觸發bfc？滿足下列任意乙個或多個條件即可 三 bfc布局規則 四 使用場景 解決margin重疊的問題 margin重疊，未使...