BFC（块级格式化上下文）

BFC（Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，内部元素的布局不会影响外部，外部也不会影响内部。理解 BFC 是解决 margin 塌陷、浮动高度塌陷等常见 CSS 问题的关键。

如何触发 BFC

以下任意一种 CSS 属性均可使元素建立 BFC：

/* 根元素（html）天生就是 BFC */
overflow: hidden | auto | scroll;    /* 最常用，副作用最小 */
display: inline-block | flex | grid | table-cell;
position: absolute | fixed;
float: left | right;

BFC 的渲染规则

1. 内部的块级元素在垂直方向上依次排列。
2. 同一个 BFC 内，相邻块级元素的垂直 margin 会发生合并（取较大值）。
3. 每个元素的左外边距与所在包含块的左边界相接触（从左向右排列时）。
4. BFC 的区域不会与浮动元素重叠（可用于实现自适应两栏布局）。
5. 计算 BFC 的高度时，内部的浮动子元素也参与计算（可清除浮动导致的高度塌陷）。
6. BFC 是独立容器，内外元素互不影响。

BFC 的常见应用场景

场景	说明
清除浮动	父元素触发 BFC 后，浮动子元素会撑开父元素高度
防止 margin 塌陷	父子元素的 margin-top 合并问题，触发父元素 BFC 即可解决
防止 margin 合并	将其中一个元素包裹在 BFC 容器中
自适应布局	非浮动元素触发 BFC 后，不会与旁边的浮动元素重叠，实现两栏布局
防止文字环绕	文字所在元素触发 BFC，不再环绕浮动元素