BFC（塊級(jí)格式化上下文）

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

推薦閱讀更多精彩內(nèi)容