BFC是浏览器满足特定条件时自动创建的独立渲染区域，用于解决浮动导致的高度塌陷等问题；它通过强制包含浮动子元素来重新计算容器高度，display: flow-root是推荐的无副作用触发方式。
什么是BFC以及它为什么能修复高度塌陷
BFC（Block Formatting Context）不是某个CSS属性，而是一类渲染规则的集合。当一个元素成为BFC容器时，它的内部布局会独立计算——关键点在于：浮动子元素的高度会被纳入父容器高度计算中。这直接对抗了“浮动脱离文档流导致父容器看不见子元素”的问题。
常见触发BFC的方式有：overflow: hidden、display: flex、display: grid、position: absolute、float: left等。但只有部分方式真正适合修复高度塌陷：
-
overflow: hidden最常用：副作用小，IE8+兼容，但会裁剪溢出内容 -
display: flex或display: grid本质是布局重写，浮动在其中失效，不再需要“修复” -
float或position: absolute会让父容器自身也脱离文档流，导致后续兄弟元素上移，不能算有效解
overflow: hidden 是不是万能解？要看场景
给父容器加overflow: hidden确实能快速触发BFC并撑开高度，但它不是无条件安全的：
- 如果父容器本就该显示滚动条（比如列表容器），
hidden会把内容截断，用户看不到溢出部分 -
overflow: auto在 Safari 中可能无故出现滚动条，尤其当内容刚好满屏时 - 若父容器是
<html>或<body>，设overflow: hidden会锁死整页滚动，这是严重错误 - 某些动画或 transform 场景下，
overflow: hidden可能意外裁剪position: fixed子元素（如弹窗）
伪元素 clearfix 比 overflow 更可控的三个理由
当父容器需要保留溢出可见性（比如图文混排区域、带阴影的卡片），::after 清除浮动是更精准的选择：
立即学习“前端免费学习笔记（深入）”；
- 必须写
content: ""：否则伪元素不生成，clear: both失效 - 推荐用
display: table而非block：避免 IE6/7 下 margin 双倍问题，且能正确撑高 - 不需要额外 HTML 标签，也不影响可访问性或 SEO，语义干净
典型写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：这个类只对含浮动子元素的容器有效；如果子元素用了 display: flex，再加 .clearfix 就毫无作用——因为浮动已失效。
Flex/Grid 布局下，BFC 修复根本是误用
一旦父容器设了 display: flex 或 display: grid，子元素的 float 属性会被忽略（CSS 规范明文规定）。此时所谓“高度塌陷”压根不会发生，强行加 overflow: hidden 或 .clearfix 不仅多余，还可能掩盖真实问题：
- 如果 flex 容器里仍有元素“没撑开高度”，大概率是子项设置了
flex-shrink: 0或min-height: 0导致压缩 - JS 里监听
offsetHeight判断是否渲染完成，在 flex 容器中可能因异步布局延迟返回 0 - 老项目迁移时，遗留的清除浮动 JS 逻辑（比如
getBoundingClientRect()配合float）在 flex 下永远得不到预期值
真正容易被忽略的点是：BFC 方案本质是对浮动布局的补救。当你还在纠结怎么“清除”或“触发”，其实该先确认——这个容器，是不是早该用 flex 或 grid 重写了。
