css2.1中定义
浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks
,table-cells和table-captions
)和overflow
不为visible
的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中,盒在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin
属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin
会合并
在一个块格式化上下文中,每个盒的left外边(left outer edge)挨着包含块的left边(对于从右向左的格式化,right边挨着)。即使存在浮动(尽管一个盒的行盒可能会因为浮动收缩),这也成立。除非该盒建立了一个新的块格式化上下文(这种情况下,该盒自身可能会因为浮动变窄)
MDN中的描述
块格式化上下文(Block Formatting Context
,BFC
) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
下列方式会创建块格式化上下文:
- 根元素或包含根元素的元素
- 浮动元素(元素的
float
不是none
) - 绝对定位元素(元素的
position
为absolute
或fixed
) - 行内块元素(元素的
display
为inline-block
) - 表格单元格(元素的
display
为table-cell
,HTML
表格单元格默认为该值) - 表格标题(元素的
display
为table-caption
,HTML
表格标题默认为该值) - 匿名表格单元格元素(元素的
display
为table
、table-row
、table-row-group
、table-header-group
、table-footer-group
(分别是HTMLtable
、row
、tbody
、thead
、tfoot
的默认属性)或inline-table
) overflow
值不为visible
的块元素display
值为flow-root
的元素contain
值为layout
、content
或strict
的元素- 弹性元素(
display
为flex
或inline-flex
元素的直接子元素) - 网格元素(
display
为grid
或inline-grid
元素的直接子元素) - 多列容器(元素的
column-count
或column-width
不为auto
,包括column-count
为1
) column-span
为all
的元素始终会创建一个新的BFC
,即使该元素没有包裹在一个多列容器中
创建了块格式化上下文的元素中的所有内容都会被包含到该BFC
中。
块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC
内的元素。浮动不会影响其它BFC
中元素的布局,而清除浮动只能清除同一BFC
中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC
的块级元素之间。
总结
BFC就是包住他的所有子元素