浮动导致子菜单错位的根本原因是父级浮动使文档流塌陷、position: relative 失效，子菜单absolute定位找不到有效参照；应改用flex或inline-block布局，或为浮动父级加zoom: 1和position: relative。
浮动元素脱离文档流导致子菜单错位
多级下拉菜单里，.submenu 一出现就飘到页面右上角或叠在别的模块上，不是悬停位置不对，而是它压根没“认”父级的定位上下文。根本原因是父级用了 float: left 或 float: right，导致父容器高度塌陷、position: relative 失效——子菜单用 position: absolute 时，参照的是最近的「已定位祖先」，而浮动父级不算。
- 别给菜单父容器加
float，改用display: flex或display: inline-block实现横向排列 - 如果必须兼容老浏览器（IE8），给浮动父级加
zoom: 1（触发 hasLayout）+position: relative，强制它成为定位上下文 - 检查父级是否设置了
overflow: hidden或overflow: auto，这会截断超出部分，让子菜单直接被砍掉
z-index 在浮动布局中失效的常见原因
z-index 不起作用，不是值设小了，而是层级堆叠上下文（stacking context）被意外创建。浮动本身不产生新上下文，但一旦父级加了 position: relative 且带 z-index（哪怕只是 z-index: 0），它就变成独立堆叠上下文，子菜单的 z-index: 999 只在这个小圈子里比大小，和页面其他模块完全无关。
- 删掉所有不必要的
z-index，尤其父级导航栏容器上的z-index: 0或z-index: 1 - 确保子菜单的直接父级（即悬停触发的那个
li）有position: relative，且不带z-index - 如果要用
z-index控制层级，统一在最外层导航容器（如#nav）上设一个正值，子菜单只靠position和 DOM 顺序自然堆叠
IE6–IE7 中浮动菜单 hover 失效或闪烁
IE6/7 下，鼠标移向子菜单瞬间菜单消失，本质是“hasLayout”未触发 + hover 区域断裂。浮动父级没 layout，hover 状态无法稳定传递到子元素；同时子菜单若用 display: none/block 切换，IE 会重绘异常，造成闪烁。
- 给触发 hover 的
li加zoom: 1或height: 1%，强制触发 hasLayout - 子菜单不用
display: none，改用visibility: hidden+opacity: 0（配合filter: alpha(opacity=0)兼容 IE） - 避免在
:hover里写复杂选择器如li:hover ul li a，IE6 只支持a:hover和li:hover，嵌套层级超过两层就失效
现代方案：用 flex 替代 float 后仍需注意的细节
Flex 布局虽绕开了浮动塌陷问题，但子菜单定位逻辑没变——position: absolute 依然依赖最近的 position: relative 祖先。很多人以为 flex 就万事大吉，结果子菜单还是偏移，其实是忘了给触发项加定位上下文。
立即学习“前端免费学习笔记（深入）”；
- flex 容器（如
.nav）设display: flex，但每个菜单项li必须单独加position: relative - 子菜单
.submenu的top和left值要基于li内容盒计算，不是 flex 容器边缘；用left: 0是安全的，right: 0容易因 padding/margin 偏移 - 移动端适配时，别在 flex 容器上加
flex-wrap: wrap后还指望子菜单绝对定位正常，换行会彻底打乱参照系，此时应改用 JS 动态计算位置
浮动带来的定位混乱，核心从来不是“怎么让它浮起来”，而是“浮起来之后谁来管它的孩子”。很多问题拖到调试阶段才暴露，其实写第一行 float: left 的时候，就已经埋好了子菜单位置偏移的伏笔。
