BFC 造成條件

塊格式化上下文(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爲 tabletable-row、 table-row-group、table-header-group、table-footer-group(分別是HTML table、row、tbody、thead、tfoot的默認屬性)或 inline-table
  • overflow 值不爲 visible 的塊元素
  • display 值爲 flow-root 的元素
  • contain 值爲 layoutcontent或 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瀏覽器

相關文章
相關標籤/搜索