BFC

BFC

塊格式化上下文(block formatting context) 是Web頁(yè)面的可視CSS渲染的一部分。它是塊盒子的布局發(fā)生及浮動(dòng)體彼此交互的區(qū)域。

塊格式化上下文由以下之一創(chuàng)建:

  • 根元素或其它包含它的元素
  • 浮動(dòng) (元素的 float 不是 none)
  • 絕對(duì)定位的元素 (元素具有 position 為 absolute 或 fixed)
  • 內(nèi)聯(lián)塊 inline-blocks (元素具有 display: inline-block)
  • 表格單元格 (元素具有 display: table-cell,HTML表格單元格默認(rèn)屬性)
  • 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
  • 塊元素具有overflow ,且值不是 visible
    display: flow-root

一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容,除了會(huì)創(chuàng)建新的塊格式化上下文的元素。

塊格式化上下文對(duì)于定位 (參見(jiàn) float) 與清除浮動(dòng) (參見(jiàn) clear) 很重要。==定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素==。浮動(dòng)不會(huì)影響其它塊格式化上下文中元素的布局,并且清除浮動(dòng)只能清除同一塊格式化上下文中在它前面的元素的浮動(dòng)。

MDN BFC
深入理解BFC和Margin Collapse

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,206評(píng)論 1 92
  • 先前在學(xué)習(xí)CSS float時(shí),有同學(xué)提到了BFC這個(gè)詞,作為求知好問(wèn)的好學(xué)生,哪里不懂查哪里,那么今天就來(lái)研究一...
    這名字真不對(duì)閱讀 6,708評(píng)論 3 19
  • CSS布局模型 布局:將元素以正確的大小擺放在正確的位置上 CSS包含3種基本的布局模型流動(dòng)模型(Flow)浮動(dòng)模...
    _空空閱讀 1,181評(píng)論 0 4
  • 轉(zhuǎn)載自(http://web.jobbole.com/83274/) BFC BFC全稱是Block Format...
    居客俠閱讀 2,208評(píng)論 0 20
  • 什么是BFC BFC全稱是Block Formatting Context,即塊格式化上下文。它是CSS2.1規(guī)范...
    陌客百里閱讀 573評(píng)論 3 4

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