display: flow-root 是现代唯一推荐的替代方案，专为创建无副作用BFC设计，全平台已覆盖，不裁剪内容、不干扰定位、语义清晰，且浮动布局本身已过时。
它不能真正清除浮动，只是触发了 BFC，让父容器“被动包含”浮动子元素的高度——浮动本身仍在文档流外，float 属性毫发无损。
overflow: hidden 触发 BFC 的条件很苛刻
不是写了就生效，必须同时满足：
- 父元素
display值必须是block、inline-block、table-cell等传统块盒；display: flex或display: grid上加overflow: hidden完全无效 - 父元素不能有
transform（哪怕只是transform: translateZ(0)）、filter、will-change—— 这些会创建新层叠上下文，BFC 就不启动 -
overflow: hidden必须是最终计算值；如果被!important的overflow: visible覆盖，或被更高优先级规则压制，那就白写 - 父元素若设了
height或max-height，BFC 即便触发了，高度也会被硬性截断，看起来像“没用”
为什么加了 overflow: hidden 却切掉了下拉菜单和弹窗
这不是 bug，是规范行为：overflow: hidden 的本职是裁剪，不是布局修复。一旦父容器形成 BFC，所有 position: absolute 或 position: fixed 子元素只要视觉区域超出父边界，就会被静默截断：
-
dropdown菜单向下展开时，若父容器底部离视口太近，菜单底部直接消失 -
box-shadow向外扩散的部分、::before/::after偏移几个像素的内容，全被切掉 - 移动端在该容器内
touchmove可能卡顿，尤其当内部有横向滑动轮播图时 - 配合
transform: scale()缩放后，裁剪边界仍按原始尺寸计算，导致误切
display: flow-root 是现代唯一推荐的替代方案
它专为创建无副作用 BFC 设计，2026 年已全平台覆盖（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）：
- 写法极简：
.container { display: flow-root; } - 不裁剪任何内容：
position: absolute弹层、box-shadow、transform溢出全部正常渲染 - 不干扰定位参考系：不会把父容器变成
position: absolute子元素的包含块 - 语义清晰：明确表达“我要包裹浮动子元素”，而非“请把多出来的藏起来”
真正容易被忽略的是：你花时间调试 overflow: hidden 的裁剪问题，其实是在维护一个本不该存在的技术债——浮动布局本身已是过时模式，除非做图文环绕，否则该直接上 display: flex 或 display: grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
