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)。