overflow: hidden 并非清除浮动，而是通过触发bfc使父容器包含浮动子元素，但会裁剪所有溢出内容；它使父容器成为绝对定位子元素的包含块，导致下拉菜单等被截断。
有，而且副作用很实在——overflow: hidden 不是“清除浮动”，它只是靠触发 BFC 让父容器重新包含浮动子元素，但会静默裁剪所有超出父容器边界的视觉内容。
为什么下拉菜单、tooltip 会突然消失
只要父容器设了 overflow: hidden，它就自动成为 position: absolute 子元素的「包含块」。这意味着：
• .dropdown-menu 的定位参考系从 body 变成了这个父容器
• 它的渲染区域被硬性限制在父容器的 border box 内
• 即使 top: 100% + left: 0，只要计算后位置超出父容器底边，就被直接剔除出渲染树
这不是 bug，是 CSS 规范行为。开发者工具里临时禁用 overflow: hidden，菜单立刻回来，基本就能锁定问题。
哪些内容会被裁剪，容易被忽略
overflow: hidden 裁剪的是所有溢出像素，不区分语义：
-
box-shadow向外延伸的部分（比如box-shadow: 0 4px 12px rgba(0,0,0,0.15)） - 用
transform: translateX(-10px)或margin-left: -20px拉出的装饰线、图标边缘 -
::before/::after伪元素生成的内容，哪怕只偏移几个像素 - 横向滚动的表格容器（
overflow-x: auto）在 Safari 中可能强制显示空白滚动条且无法隐藏
display: flow-root 是更安全的替代方案
它同样触发 BFC，但不改变溢出行为：
-
display: flow-root是专为解决浮动塌陷设计的，语义清晰 - 绝对定位子元素不受影响，阴影、滚动、动画延伸都正常
- 现代浏览器支持良好：
Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ - 写法极简：
.nav { display: flow-root; }，无需伪元素、不新增 DOM
真正难排查的，从来不是“为什么清不了浮动”，而是“为什么菜单不见了”“为什么阴影少了一半”——这些往往就藏在一行 overflow: hidden 后面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
