overflow:hidden“清浮动”的真实原因是触发bfc，而非设计初衷；它通过创建独立渲染区域使父容器包含浮动子元素高度，但会裁剪absolute/fixed元素；现代应优先用display:flow-root。
overflow:hidden 触发 BFC 才是“清浮动”的真实原因
它根本不是为清除浮动设计的，只是因为触发了块级格式化上下文（BFC），让父容器重新包含浮动子元素的高度。浏览器必须为 overflow:hidden 建立独立渲染区域，才能判断哪些内容该被裁掉——这个过程顺带解决了高度塌陷。
关键点在于：overflow:hidden 的语义是“裁掉溢出”，不是“修复布局”。所谓“清除浮动”，只是 BFC 的附带效果。
-
overflow:visible明确不触发 BFC（W3C 规范写死） -
overflow:auto和overflow:scroll同样触发 BFC，但行为更隐晦 - 只对
display为block、table-cell、flow-root等块级盒生效；flex或grid容器上加overflow:hidden无效 - 根元素（
）加overflow:hidden也不会触发 BFC
为什么 overflow:hidden 会切掉下拉菜单和 fixed 元素
这是最常被忽略的副作用：BFC 创建后，所有 position:absolute 或 position:fixed 子元素一旦超出父容器边界，就会被无声裁剪——不是 bug，是规范行为。
典型现象包括：
- 下拉菜单、Tooltip、Modal 在父容器内突然消失
- 移动端
touchmove在该容器内失效或滚动异常 - 配合
transform: scale(0.95)时，裁剪仍按原始尺寸计算，导致误切 - 动画中父容器高度变化时，裁剪边界未同步更新，出现视觉错位
现代项目该用 display:flow-root 替代
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，子项自动参与父容器高度计算，“清除浮动”这个概念在它们内部压根不存在。
最容易被忽略的一点：你花时间调试 overflow:hidden 的裁剪问题，其实是在维护一个本不该存在的技术路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
