BFC（Block Formatting Context，块级格式化上下文）是 HTML/CSS 中控制块级元素布局的核心概念。以下是简明解析：
核心理解
BFC 是页面上的一个独立渲染区域，内部元素的布局不受外部影响，反之亦然。可将其视为一个“隔离的容器”。
触发条件（满足其一即可）
- 根元素（<html>）
- float 值非 none
- position 为 absolute 或 fixed
- display 为 inline-block/flex/table-cell 等
- overflow 非 visible（如 hidden/auto）
核心特性
- 垂直边距折叠
同一 BFC 内相邻块级元素的垂直 margin 会重叠（取最大值）。
解决：将元素放入不同 BFC（如用 div 包裹并触发 BFC）。 - 清除浮动
BFC 会自动计算内部浮动元素的高度，避免父容器高度塌陷。
示例：父元素设置 overflow: hidden 即可包含浮动子元素。 - 阻止元素被浮动覆盖
BFC 区域不会与浮动元素重叠（实现两栏布局的基础）。
示例：左侧浮动，右侧触发 BFC 自适应宽度。 - 隔离渲染
内部元素样式不影响外部（如阻止浮动元素溢出）。
<style>
.container {
overflow: hidden; /* 触发BFC解决高度塌陷 */
background: #eee;
}
.float-left {
float: left;
width: 30%;
}
.content {
overflow: hidden; /* 触发BFC避免被浮动覆盖 */
}
</style>
<div class="container">
<div class="float-left">浮动元素</div>
<div class="content">自适应内容区域（不与浮动重叠）</div>
</div>
BFC 通过创建独立布局环境，解决了三大问题：
边距折叠 浮动清除 布局干扰
掌握触发条件和特性，能有效控制复杂页面布局。