overflow:hidden清除浮动的本质是触发bfc，使父容器重新计算高度包裹浮动元素，但会强制裁剪所有溢出内容（如下拉菜单、阴影、绝对定位元素），因其将父容器变为包含块和裁剪边界；推荐用display:flow-root替代，它同样创建bfc但无裁剪副作用。
overflow:hidden 清除浮动的本质是触发 BFC，不是“清理”浮动
它让父容器重新计算高度，把浮动子元素包进来，从而解决高度塌陷——但这只是副作用。真正发生的动作是：浏览器为该元素创建一个新的块级格式化上下文（BFC），而 BFC 的一个硬性规则就是「内容不能溢出其边界」。所以一旦触发，裁剪就自动生效。
常见错误现象：overflow:hidden 加上去后，下拉菜单不见了、tooltip 被切半、阴影消失、position: absolute 提示框错位。这些都不是“bug”，而是规范行为。
- 只要父元素同时满足
overflow不为visible且position不是static，就会成为子元素的「包含块」和「裁剪边界」 -
z-index再高也没用，因为新层叠上下文已建立，子元素被锁死在父容器内边框（border box）范围内 - 即使父容器高度足够，只要子元素 top/bottom 计算值超出其 border box，就会被无声截断
为什么 position: absolute 下拉菜单会被裁掉
这不是 overflow:hidden “针对”绝对定位做的特殊处理，而是 CSS 规范强制要求：当父容器是 BFC（比如由 overflow:hidden 触发）且非 static 定位时，它自动成为所有后代 position: absolute 元素的「包含块」。
这意味着：.dropdown-menu 的定位参考系不再是 viewport 或 body，而是这个父容器；它的渲染区域也被限制在父容器的 border box 内——超出部分不进渲染树、不响应鼠标事件、也不触发滚动。
- 临时验证方法：在开发者工具中禁用该祖先的
overflow样式，如果菜单立刻显示完整，基本可锁定问题 - 注意 Bootstrap 5 的
.navbar默认带overflow:hidden，别全局删，要针对性覆盖 -
transform、opacity: 0.99、will-change会强化层叠上下文，让问题更隐蔽
display: flow-root 是更安全的替代方案
display: flow-root 是专为解决浮动导致的高度塌陷设计的，语义清晰、无裁剪副作用，现代浏览器支持良好（Chrome 64+、Firefox 59+、Safari 15.4+）。
它同样触发 BFC，但不改变溢出行为：滚动条照常出现、position: absolute 不受影响、clip-path 和阴影也正常工作。
- IE 完全不支持
display: flow-root，需兼容 IE11 时回退到伪元素 clearfix 或zoom: 1 - Flex/Grid 容器里设
overflow:hidden不会触发 BFC，此时flow-root依然有效 - 如果父容器本身需要滚动，
overflow:auto比hidden更可控，但依然有裁剪风险
真要保留 overflow:hidden，怎么绕过裁剪
别只想着删掉它——很多时候它是为圆角背景、图片裁剪或清除浮动存在的。更务实的做法是把溢出内容“移出去”。
典型方案是用 JavaScript 把 .dropdown-menu 移动到 document.body 下，再用 getBoundingClientRect() 动态计算位置并设置 top/left。
- 必须监听滚动和 resize，否则菜单会脱标
- 注意焦点管理，移走后要手动维护键盘导航和
aria-hidden状态 - 避免在 transform 层级复杂的容器里做这事，Safari 对
translateZ(0)+ BFC 的组合处理不稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
