BFC的核心作用是隔离浮动影响并自动包含浮动子元素；设置overflow:hidden可触发BFC，使父容器计算浮动子元素高度以防止塌陷，且无需额外标签。
在 CSS 浮动布局中，BFC（Block Formatting Context，块级格式化上下文）的核心作用是：隔离内部浮动元素对外部布局的影响，并自动包含其内部的浮动子元素。通过设置 overflow: hidden 触发 BFC，是最常用、最简洁的清除浮动方式之一。
为什么需要清除浮动？
当一个容器内的子元素设置了 float: left 或 float: right，它们会脱离普通文档流，导致父容器高度塌陷（表现为高度为 0），进而影响后续元素的布局。
- 父容器无法包裹浮动子元素
- 后续兄弟元素会上移，与浮动元素重叠
- 页面结构错乱，尤其在多栏布局中明显
overflow: hidden 如何创建 BFC 并清除浮动？
overflow 值为 hidden、auto 或 scroll（非 visible）时，浏览器会为该元素创建一个新的 BFC。而 BFC 的一个关键特性是：它会计算内部浮动元素的高度，从而撑开自身容器。
- 触发 BFC 后，父容器不再“无视”浮动子元素，而是将其纳入高度计算
- 无需额外标签或伪元素，纯 CSS 解决，语义干净
- 注意：若子元素实际溢出（如宽度过大或文字过长），
hidden会裁剪内容，此时可改用overflow: auto
其他常见触发 BFC 的方式对比
除了 overflow: hidden，以下 CSS 声明也能创建 BFC，效果相同但适用场景略有不同：
立即学习“前端免费学习笔记（深入）”；
-
float: left/right—— 元素自身浮动，但会脱离文档流，不适合作为清除容器 -
position: absolute/fixed—— 脱离文档流，不适用于常规布局容器 -
display: inline-block / table-cell / flex / grid—— 有效，但可能改变元素默认显示行为 -
contain: layout（较新）—— 语义明确，兼容性稍弱
一个小例子
假设有一个两列浮动布局：
<div class="wrap"> <div class="left">左栏</div> <div class="right">右栏</div> </div>
若只给 .left 和 .right 设置 float: left，.wrap 会塌陷。只需加一句：
.wrap {
overflow: hidden; /* 创建 BFC，自动包含浮动子项 */
}此时 .wrap 就能正确包裹两个浮动列，后续元素也会正常换行。
