BFC（塊級格式化上下文）

  1. BFC是什么？
  • BFC（block formatting context）塊級格式化上下文，是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現(xiàn)的區(qū)域，也是浮動層元素進行交互的區(qū)域。
  1. BFC是怎么形成的？
  • 一個塊格式化上下文由以下之一創(chuàng)建：
    • 根元素或其它包含它的元素
    • 浮動元素（float不為none）
    • 絕對定位元素（position：absolute | fixed）
    • 內(nèi)聯(lián)塊（display：inline-block）
    • 表格單元格 （元素具有 display: table-cell，HTML表格單元格默認屬性）
    • 表格標題 （元素具有 display: table-caption, HTML表格標題默認屬性）
    • 具有overflow且值不是 visible 的塊元素
    • display：flow-root
    • column-span: all應當總是會創(chuàng)建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
  1. BFC有什么作用？
  • BFC能阻止垂直外邊距的合并demo
  • BFC不會重疊浮動元素demo
  • BFC可以包含浮動元素demo
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容