overflow:hidden不真正清除浮动，而是触发BFC使父容器包含浮动子元素高度，同时强制裁剪所有溢出内容（如下拉菜单、box-shadow），display:flow-root才是无副作用的现代替代方案。
overflow:hidden 触发 BFC 同时强制裁剪内容
它不是“清除浮动”的专用属性，而是先创建块级格式化上下文（BFC），再无差别裁掉所有超出父容器边界的像素——包括 position: absolute 的下拉菜单。哪怕只多出 1px 的 box-shadow 或字体下沉，也会被静默截断。
常见现象：
- 菜单只显示顶部几像素，其余消失
- 鼠标悬停时菜单闪一下就不见
- 开发者工具里高亮框被明显切掉
display:flow-root 是无副作用的现代替代方案
display: flow-root 是 CSS 专为创建无副作用 BFC 设计的值，它只做一件事：让父容器包含浮动子元素高度，但不裁剪、不干扰 position: absolute 定位，也不影响 z-index 层叠逻辑。
实操建议：
- 替换旧写法：
.nav { overflow: hidden; }→.nav { display: flow-root; } - 无需额外
overflow设置，语义清晰 - Chrome 58+ / Firefox 57+ / Safari 15.4+ 已全覆盖，2026 年主流项目可直接用
- 若需兼容 IE11，可用
@supports not (display: flow-root)回退到伪元素方案
为什么加了 position:relative 还不管用？
下拉菜单依赖最近的“已定位祖先”作为定位参考，而 float 元素本身不算已定位（position: static）。如果触发菜单的没加 position: relative，子菜单就会向上找到 ，位置完全错乱。
关键点：
- 必须给触发元素（如
.nav-item或.dropdown）加position: relative - 不要同时设
z-index: 0，否则会创建新层叠上下文，把子菜单锁死在内部 - 即使该元素本身用了
float: left，也只需叠加position: relative，无需清除浮动来“救”定位
overflow:hidden + position:relative 组合才是最隐蔽的遮挡源
很多人以为只要没写 z-index 就不会创建层叠上下文，其实不然：overflow: hidden 配合任意非 static 的 position（哪怕 position: relative 且 z-index: auto）都会强制创建独立层叠上下文。
后果是：
-
.dropdown-menu的z-index: 9999只在父容器内部有效，无法盖过兄弟元素 - 父容器高度不够时，还会直接裁掉菜单底部
- 移动端可能同步导致
touchmove失效或滚动异常 - 真正卡住人的，往往不是“怎么让菜单显示”，而是修复后没确认父容器的
offsetHeight是否已非零——字体加载延迟、图片未就绪、margin折叠都可能导致flow-root暂时撑不开
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
