overflow:hidden会砍掉下拉菜单，是因为它触发BFC的同时强制裁剪所有溢出内容；只要position:absolute子元素超出父容器边界，就会被截断——这是规范行为，非bug。
为什么overflow:hidden会砍掉下拉菜单
它不是“清除浮动”的专用属性，而是先触发BFC，再顺手裁剪所有溢出内容。只要子菜单的position: absolute超出了父容器边界，哪怕只是1px，就会被直接切掉。这不是bug，是设计行为——overflow: hidden的语义就是“不许任何东西露头”。
检查父容器是否无意中加了overflow:hidden
常见误操作包括：在导航栏.nav、菜单项.nav-item或整个头部.header上统一加了overflow: hidden来“防塌陷”，结果把所有ul下拉菜单全截断了。用开发者工具点开computed style，重点看overflow和overflow-x/overflow-y是否为hidden，尤其注意是否来自继承或重置样式表。
真正该用display:flow-root替代overflow:hidden
display: flow-root是专为闭合浮动设计的现代方案，它创建BFC但不裁剪内容，无副作用。兼容性已覆盖Chrome 58+/Firefox 57+/Safari 15.4+（2026年主流环境完全可用）：
.nav {
display: flow-root; /* ✅ 替代 overflow: hidden */
/* 不再需要 overflow: hidden，也不再切菜单 */
}如果必须兼容老浏览器（如IE11），可降级为伪元素::after清除法，而不是退回去用overflow: hidden。
立即学习“前端免费学习笔记（深入）”；
即使用了flow-root，下拉菜单仍被盖住？查z-index上下文
清除浮动只解决高度塌陷，不解决层叠顺序。若父容器（比如#nav）设了z-index: 0或transform，它就变成了独立层叠上下文，子菜单的z-index: 999只在它内部生效，跟弹窗、模态框根本不在一个层级里。
- 删掉父级上无意义的
z-index: 0 - 确保下拉菜单的直接父级有
position: relative，且不设z-index - 全站层级控制只在最外层容器（如
body或#app）设一次z-index，其余靠DOM顺序自然堆叠
最常被忽略的是：display: flow-root解决了塌陷，但没解决定位锚点。如果触发下拉的li没设position: relative，子菜单的top: 100%就找不到参照，照样飞走。
