overflow:hidden 不清除浮动，而是触发bfc以包含浮动子元素高度，但会裁剪溢出内容；真正推荐方案是display:flow-root，它无副作用地创建bfc，现代浏览器已广泛支持。
overflow:hidden 并不“清除”浮动，它只是触发 BFC，让父容器重新包含浮动子元素的高度——但会裁剪溢出内容，这是副作用，不是功能。
overflow:hidden 触发 BFC 的真实条件
它不是只要写了就生效。必须同时满足三个条件：
-
overflow计算值为hidden、auto或scroll（visible明确不触发） - 该元素不能是根元素（即不能是
） - 该元素 display 值必须是块级盒类型，如
block、flow-root、table-cell；inline-block、flex、grid不在此列
常见误判：给一个 display: flex 的父容器加 overflow: hidden，BFC 不会触发——因为 flex 容器本身不走块级格式化上下文逻辑。
为什么 overflow:visible 就不行
W3C 渲染规范写死了一条：overflow: visible 是唯一明确禁止触发 BFC 的值。哪怕你同时写了 position: relative 或 float: left，只要最终计算值是 visible，BFC 就不会创建。
而 hidden 要求浏览器“裁掉溢出内容”，就必须先确定哪些内容在边界外——这迫使渲染引擎建立独立的格式化区域（即 BFC），才能做裁剪判断。所以“清浮动”只是这个过程的副产品。
display:flow-root 才是现代正解
它是 CSS 专为创建无副作用 BFC 设计的 display 值：
- 只做一件事：创建 BFC，不改溢出行为，不裁内容，不影响
position: absolute子元素定位 - 兼容性已覆盖主流浏览器（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），2026 年绝大多数项目可直接用
- 若需兼容 IE，才退回到
::after { display: table; clear: both; }这类伪元素方案
别再把 overflow: hidden 当成“清浮动开关”——它本质是“我要裁内容”，顺带把高度撑起来了。真正要解决塌陷，就该用语义匹配的 display: flow-root。
最容易被忽略的一点
浮动布局本身已是过时模式。只要不是做图文环绕（比如新闻正文里图片左浮、文字绕排），就该直接用 display: flex 或 display: grid ——它们天然创建 BFC，子项自动参与父容器高度计算，“清除浮动”这个概念根本不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
