浮动菜单导致下方内容上浮重叠，本质是父容器塌陷使文档流断裂；需用.clearfix::after清除浮动或改用flex/gird布局根治，而非依赖z-index或overflow:hidden。
浮动菜单导致下方内容上浮重叠
这不是“菜单盖住了内容”，而是浮动菜单让父容器塌陷，下方内容失去了参照，直接贴到页面顶部。你看到的“重叠”其实是下方元素在文档流里本该在的位置——只是那个位置现在被浮动菜单视觉占用了。
常见现象：div没高度、section文字从导航栏底下透出来、鼠标悬停菜单闪一下就消失（尤其旧版 Safari）。
- 检查触发菜单的父容器是否用了
float却没闭合：它不撑高，后续内容就“掉上去” - 别只给菜单项加
position: absolute，必须同时给它的直接父级（比如.nav-item）加position: relative，否则绝对定位会落到body上，位置飘移 - 用开发者工具选中下方内容，看它的“顶部”是否真的紧贴
body顶部——如果是，说明父容器塌陷了，不是 z-index 问题
清除浮动但别裁掉下拉菜单
伪元素清除是安全底线，但很多人在父容器上误加 overflow: hidden，结果把展开的下拉菜单直接截断——它不解决塌陷，反而制造新遮挡。
- 优先用
.clearfix::after：.clearfix::after { content: ""; display: table; clear: both; }加在菜单父容器上（如.navbar），不干扰子元素定位 - 如果必须用
overflow，选overflow: auto而非hidden；auto在无溢出时不出现滚动条，且允许position: absolute子元素外溢 - 检查是否在菜单容器本身（如
.dropdown-menu的父级）写了overflow: hidden——这是下拉被“砍头”的最常见原因
z-index 生效前必须过三关
设了 z-index: 9999 还是被盖住？大概率卡在底层约束上。浮动菜单本身不参与 z-index 层级，只有加了 position 的元素才受控。
- 目标元素必须有
position：static下z-index完全无效，哪怕值再大 - 层叠上下文不能被意外截断：如果菜单父容器本身有
z-index且非auto，子菜单的z-index就只在它内部生效，无法突破 - 移动端 Safari 对
z-index + float兼容性差，可临时加transform: translateZ(0)强制新建层叠上下文，比硬调z-index更可靠
真正省心的解法：换掉 float
浮动本就不是为交互式菜单设计的。2026 年还在靠 float + clear + negative margin 硬凑，等于主动引入塌陷、错位、响应式脆弱等副作用。现代项目里，菜单结构天然适合 Flex。
- 把导航栏整体设为
display: flex，菜单项横向排列，不再需要float - 保留
position: relative在触发项上（如.nav-item），确保下拉菜单能正确锚定 - 如果涉及复杂网格或响应式折叠，直接上
display: grid，用grid-template-areas控制区域，浮动彻底退出历史舞台
浮动菜单与下方内容重叠，本质是文档流断裂的连锁反应。修 clear 是补丁，换布局才是根治——而且改完后，连 z-index 和 overflow 的纠结都一并消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
