CSS：BFC
BFC 的概念
BFC（块级格式化上下文）是 CSS 渲染过程中的一种独立布局环境，它是一块独立的渲染区域，规定了在该区域中，常规流块盒的布局。内部的元素布局不受外部影响，也不会影响外部元素。
（注：常规流和标准流一般是一回事）
常规流块盒特点：
- 水平方向上必须撑满包含块，
- 在包含块的垂直方向上依次摆放
- 若外边距无缝相邻，则进行外边距合并
- 无论摆在哪儿，或者高度自动时，都会无视浮动元素（自然也会无视定位元素）
BFC 渲染区域：这个区域由某个 HTML 元素创建，以下元素会在其内部创建 BFC 区域（触发 BFC）
- 根元素（
<html>）。 - 浮动元素（
float不为none）和绝对定位元素（position为absolute或fixed）。 overflow不为visible（如auto、hidden）的块盒。display为inline-block、table-cell、flex、grid等。
BFC 的特性
- 内部元素垂直排列：BFC 内的块级元素默认垂直排列，间距由
margin决定。 - 边距不会重叠：属于同一 BFC 的相邻元素
margin会合并，但不同 BFC 的边距不会合并。 - 包含浮动元素：计算 BFC 高度时，浮动元素也会参与计算（解决浮动塌陷）。
- 隔离外部浮动：BFC 区域不会与外部浮动元素重叠。
BFC 的常见应用
解决浮动塌陷
父元素未设置高度时，子元素浮动会导致父元素高度塌陷。通过触发父元素的 BFC 可解决：
.parent {overflow: hidden; /* 触发 BFC */
}
避免边距合并
两个相邻元素的 margin 会合并，通过包裹 BFC 容器隔离：
<div style="overflow: hidden;"><p style="margin: 20px;">内容</p>
</div>
实现自适应两栏布局
利用 BFC 区域不与浮动元素重叠的特性：
.left {float: left;width: 200px;
}
.right {overflow: hidden; /* 触发 BFC */
}
注意事项
- 过度使用 BFC 可能导致布局复杂化（如频繁使用
overflow: hidden会隐藏溢出内容）。 - 现代布局方案（Flexbox、Grid）可替代部分 BFC 场景，但需考虑兼容性。
BFC 是 CSS 布局的核心机制之一，合理使用能有效解决多种布局问题。