子菜单“消失”主因是父容器高度塌陷或定位上下文缺失：float导致父高为0，absolute子菜单无参照而飞出或被overflow:hidden裁剪；解决关键是给触发元素加position:relative，并用display:flow-root替代overflow:hidden来清除浮动、撑开父容器且不裁剪。
子菜单“消失”不是真的被删了，而是被裁剪或定位失效——float让父容器高度塌陷、不构成定位上下文，position: absolute的子菜单要么飞到body上，要么被overflow: hidden直接砍掉。
为什么加 overflow: hidden 后子菜单不见了
它确实能撑开父容器（触发 BFC），但副作用是强制裁剪所有超出边界的元素，包括脱离文档流的position: absolute子菜单。常见表现是：菜单只露出顶部几像素，或鼠标一移过去就闪退。
-
overflow: hidden和overflow: auto都会裁剪，哪怕只是多出 1px 的box-shadow或字体下沉 - 若父容器本身设了
border-radius或transform，裁剪边界更难预测 - 别信“加了 overflow 就万事大吉”——先检查开发者工具里子菜单的高亮框是否被截断
给触发项加 position: relative 是硬性前提
没有这一步，z-index 再高、display 再对，子菜单也找不到定位参照。浮动父级不算“已定位祖先”，absolute 只能往上找到 body。
- 找到悬停触发的元素，通常是
<li class="dropdown">或<div class="nav-item"> - 只加
position: relative，不要同时设z-index: 0（否则创建新层叠上下文，锁死子菜单层级） - 如果该元素本身用了
float: left，保留 float，再加position: relative即可，不用清除浮动来“救”定位
用 display: flow-root 替代浮动清除
这是现代项目的首选解法：一行代码解决高度塌陷，且不裁剪、不干扰 absolute 定位和 z-index 层叠。
立即学习“前端免费学习笔记（深入）”；
-
.nav { display: flow-root; }—— 直接生效，无需伪元素、不新增 DOM - 兼容 Chrome 58+ / Firefox 57+ / Safari 10.1+，2026 年绝大多数项目可直接用
- 若需支持 IE11，用
@supports not (display: flow-root) { .nav { overflow: hidden; } }回退 - 注意：
flow-root和position: absolute不能共存于同一元素，后者会让前者失效
真正卡住人的，往往不是“怎么让菜单显示出来”，而是修复后没确认父容器的 offsetHeight 是否已非零——浏览器计算高度时受字体加载、图片延迟、margin 折叠等影响，即使写了 flow-root，DOM 仍可能暂时撑不开。
