BFC 形成條件

塊格式化上下文（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或 strict 的元素
• 彈性元素（display為 flex 或 inline-flex元素的直接子元素）
• 網格元素（display為 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
• column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標准變更，Chrome bug）。

一個新的 display 屬性的值，它可以創建無副作用的BFC。在父級塊中使用 display: flow-root 可以創建新的BFC。

 

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context