overflow:hidden触发BFC才是闭合浮动的本质原因，它本意是裁剪溢出内容，因需建立独立渲染区域而附带包裹浮动子元素；现代应优先使用display:flow-root。
overflow:hidden 触发 BFC 才是闭合浮动的本质原因
它根本不是为“清除浮动”设计的，而是因为 overflow:hidden 要执行“裁掉溢出内容”这个动作，浏览器必须先建立一个独立渲染区域（即块级格式化上下文，BFC），才能判断哪些内容该被裁。这个过程顺带让父容器重新包含浮动子元素的高度——所谓“闭合浮动”，只是 BFC 的附带效果。
关键点在于：overflow:hidden 的语义是“隐藏溢出”，不是“修复浮动”。如果你只盯着“清浮动”这个表象，很容易在后续调试中栽跟头。
哪些条件下 overflow:hidden 才会真正触发 BFC
不是写了就生效，必须同时满足三个硬性条件：
-
overflow的最终计算值必须是hidden、auto或scroll（visible明确不触发，W3C 规范写死） - 该元素不能是根元素（即不能作用于
） -
display值必须是块级盒类型，比如block、table-cell、flow-root；flex、grid、inline-block都不在此列
常见误判：给一个 display: flex 的父容器加 overflow:hidden，BFC 不会触发——因为 flex 容器本身走的是不同的格式化逻辑。
立即学习“前端免费学习笔记（深入）”；
为什么 overflow:hidden 会切掉下拉菜单和 fixed 元素
这是最常被忽略的副作用，而且不是 bug，是规范行为：
- 一旦父容器触发 BFC，所有
position:absolute或position:fixed子元素超出其边界时，会被无声裁剪 - 典型现象包括：下拉菜单、Tooltip、Modal 突然消失；移动端
touchmove在该容器内失效 - 配合
transform: scale(0.95)时，裁剪仍按原始尺寸计算，导致误切 - 动画中父容器高度变化时，裁剪边界未同步更新，出现视觉错位
你花时间调试这些裁剪问题，其实是在维护一个本不该存在的技术路径。
现代项目该用 display:flow-root 替代 overflow:hidden
display: flow-root 是 CSS 专为创建无副作用 BFC 设计的值，2026 年主流浏览器已全覆盖（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）：
- 只做一件事：创建 BFC，不裁内容、不影响
position:fixed定位、不干扰transform动画 - 写法简单：
display: flow-root，无需额外overflow设置 - 语义清晰，明确表达“我要包裹浮动子元素”，而非“请把多出来的藏起来”
- 若需兼容 IE，才退回到伪元素方案：
.clearfix::after { content: ""; display: table; clear: both; }
浮动本身已是过时模式。除非你在做图文环绕（比如新闻正文里图片左浮、文字绕排），否则根本不该用 float 布局。display:flex 和 display:grid 天然创建 BFC，子项自动参与父容器高度计算，“闭合浮动”这个概念在它们内部压根不存在。
