塊格式化上下文(Block Formatting Context,BFC) 是Web頁面的可視化CSS渲染的一部分,是塊盒子的佈局過程發生的區域,也是浮動元素與其餘元素交互的區域。css
下列方式會建立塊格式化上下文:git
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。github
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context瀏覽器