第203题：介绍一下 BFC 布局规则？

BFC 是 Block Formatting Context 的缩写，译为 块级格式化上下文。说白了就是块级元素的布局渲染规范。触发 BFC 的 block 是遵循此规范的。

BFC（Block Formatting Context，块级格式化上下文）是CSS中用于控制元素布局的独立渲染区域，其内部元素遵循特定规则布局，且不影响外部环境。

核心布局规则

1. ‌垂直排列‌
   • 内部元素（块级盒）按垂直方向依次排列，间距由外边距（margin）决定。
   • 同一BFC内相邻元素的外边距可能重叠（外边距塌陷）。 ‌
2. ‌与浮动元素的隔离‌
   • BFC区域不会与浮动元素重叠，即使内部存在浮动元素，BFC容器仍会计算其高度。 ‌
3. ‌外边距不传递‌
   • BFC内部元素的外边距不会传递到外部容器，避免外边距塌陷问题。 ‌
4. ‌定位规则‌
   • 每个元素的外边距框（margin box）左侧与包含块的边框框（border box）左侧对齐（从左到右布局时）。 ‌

触发条件

• 元素设置浮动（float ≠ none）
• 元素设置绝对定位（position: absolute/fixed）
• display 为inline-block、table-cell、table-caption
• overflow 不为 visible
• 根元素（body）默认触发BFC ‌