块级格式化上下文

块级格式化上下文（ BFC ），是一块独立的渲染区域。 规定了内部元素如何布局，并且内部元素与外部元素之间相互隔离，互不影响。

产生条件

• 根元素（html 元素）
• 浮动元素（float 不为 none）
• 定位元素（position 为 absolute 或 fixed）
• display（inline-block、table）
• overflow 不为 visible
• flex 容器的子元素
• grid 容器的子元素
• 等等

渲染规则

• BFC 元素内部的浮动元素会参与高度计算（可用于清除浮动）
• BFC 元素内部的父子或兄弟元素垂直方向上会产生 margin 折叠（可用于防止 margin 折叠）
• BFC 元素不会和浮动元素重叠（可用于两栏布局）
• BFC 元素内部元素与外部元素相互隔离，互不影响

使用场景

• 清除浮动
• 防止 margin 塌陷和合并
• 防止元素被浮动元素覆盖（两栏布局）