必须给导航项（如<li>）设置position: relative，才能使绝对定位的下拉菜单以其为基准精准展开；若仅用float而未创建定位上下文，菜单将相对于<body>定位而错位。
浮动导航栏 + 绝对定位下拉菜单
浮动本身不能直接撑开父容器高度，也不支持层级覆盖，所以纯 float 做导航时，下拉菜单必须依赖 position: absolute 实现悬停展开。关键不是“能不能放”，而是“相对于谁定位”——必须让导航容器成为已定位上下文。
常见错误是给 <ul> 或 <li> 直接加 float 后，再给子菜单加 position: absolute，结果菜单飘到页面左上角或错位。这是因为没有最近的已定位祖先（position 不为 static）。
- 给最外层导航容器（如
.nav或<nav>）设置position: relative -
<li>保持float: left，不加position - 下拉菜单（
.dropdown-menu）用position: absolute，并设top: 100%和left: 0对齐父项底部 - 务必在
<li>上加position: relative—— 这才是下拉菜单真正的定位参考点
清除浮动导致定位元素偏移
很多教程一上来就给导航父容器加 overflow: hidden 或伪元素 ::after 清除浮动，但若同时存在 position: absolute 的子元素（比如右上角登录按钮），它们可能被裁剪或定位失效。
原因：overflow: hidden 会创建新的块级格式化上下文（BFC），而 position: absolute 元素若未指定 z-index，其堆叠上下文会被限制在该 BFC 内，视觉上像“被框住”了。
立即学习“前端免费学习笔记（深入）”；
- 优先用伪元素清除浮动：
.nav::after { content: ""; display: table; clear: both; } - 避免在导航容器上直接设
overflow: hidden，除非你明确需要裁剪内容 - 如果必须用
overflow，记得给绝对定位元素加z-index: 10并确保其父容器有position: relative
IE8–IE9 下 float 与 position 兼容性陷阱
老浏览器对 display: inline-block 支持差，所以仍需靠 float 排导航项；但 IE8 不识别 z-index 在非定位元素上的效果，且 position: absolute 子元素若父 <li> 没设 hasLayout（如 zoom: 1），会定位失准。
- 给每个
<li>加zoom: 1（IE专有触发 hasLayout） - 下拉菜单的
width最好用固定值或min-width，避免 IE 中width: auto计算异常 - 不要依赖
right: 0对齐右端，IE8 下可能偏移，改用left: auto; right: 0并配合position: relative父容器
响应式断点中浮动失效后的定位 fallback
当媒体查询里把导航从 float 切成 display: block 或 flex，原来靠 position: absolute 定位的下拉菜单可能突然错位——因为参考点变了（<li> 不再是相对定位状态）。
这不是 bug，是预期行为：absolute 总找最近的已定位祖先，一旦 <li> 在小屏下取消了 position: relative，它就会往上找，直到 .nav 或 body。
- 在所有断点里统一给
<li>设置position: relative，哪怕它没浮动 - 下拉菜单的
top/left值尽量用em或rem，避免像素值在缩放时错位 - 移动端慎用
hover触发下拉，改用focus-within或 JS 控制显隐，否则触摸设备无法展开
float 或加一个 position，都得重新验证整个定位链是否断裂——尤其当嵌套层级变深、或引入第三方组件时，那个被遗忘的 position: static 父元素，往往就是问题源头。 
