BFC

BFC

块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。

块格式化上下文由以下之一创建：

• 根元素或其它包含它的元素
• 浮动 (元素的 float 不是 none)
• 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 inline-blocks (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 块元素具有overflow ，且值不是 visible
  display: flow-root

一个块格式化上下文包括创建它的元素内部所有内容，除了会创建新的块格式化上下文的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。==定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素==。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

MDN BFC
深入理解BFC和Margin Collapse