overflow:hidden 并非真正“清除”浮动，而是通过触发BFC使父容器包含浮动子元素高度，但会裁剪溢出内容；现代推荐用display:flow-root创建无副作用BFC。
它根本不“清除”浮动，只是触发了 BFC，让父容器重新包含浮动子元素的高度——但会裁剪溢出内容，这是副作用，不是功能。
overflow:hidden 触发 BFC 的真实条件
不是写了就生效。必须同时满足三个条件：
-
overflow计算值为hidden、auto或scroll（visible明确不触发） - 该元素不能是根元素（即不能是
<html>） -
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 就不会创建。
立即学习“前端免费学习笔记（深入）”；
而 overflow: hidden 要求浏览器“裁掉溢出内容”，就必须先确定哪些内容在边界外——这迫使渲染引擎建立独立的格式化区域（即 BFC），才能做裁剪判断。所以“撑高父容器”只是这个过程的副产品。
overflow:hidden 清浮动的典型陷阱
它本质是隐藏裁剪，不是布局修复，副作用比多数人预想的更直接：
-
position: absolute或position: fixed子元素一旦超出父边界，会被无声截断（比如下拉菜单、Tooltip、Modal） - 移动端上，
touchmove事件在该容器内可能被拦截，导致局部区域无法滑动 - 配合
transform（如scale(0.95)）时，裁剪边界仍按原始尺寸计算，容易误切 - 动画中若父容器高度动态变化，
overflow: hidden可能掩盖重排失败或渲染错位问题
这些都不是 bug，而是 BFC 裁剪行为的自然结果——你没声明“我要清浮动”，你只写了“请把多出来的部分藏起来”。
现代推荐方案：display:flow-root
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; }这类伪元素方案
最容易被忽略的一点：浮动布局本身已是过时模式。只要不是做图文环绕（比如新闻正文里图片左浮、文字绕排），就该直接用 display: flex 或 display: grid——它们天然创建 BFC，子项自动参与父容器高度计算，“清除浮动”这个概念根本不存在。
