浮动元素不参与z-index控制，需设position非static才生效；所谓“重叠”实为文档流塌陷，应清除浮动或改用flex/grid布局。
浮动元素本身不参与z-index层级控制
直接给 float 元素设置 z-index 是无效的，因为浮动元素默认处于“普通文档流层叠上下文”中，z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）生效。你看到的“重叠”，其实是浮动脱离文档流后，后续元素未清除浮动导致的视觉错位，不是真正的层叠顺序问题。
常见错误现象：z-index 设了但没反应；两个浮动盒子明明设置了不同 z-index，却仍按 HTML 顺序堆叠。
- 必须先加
position: relative（或其他非static值），再设z-index才起作用 - 如果父容器也参与层叠，需检查是否意外创建了新的层叠上下文（比如父元素有
opacity、transform或will-change） - 浮动本身只为文本环绕设计，现代布局应优先用
display: flex或display: grid
清除浮动比调z-index更治本
多数所谓“浮动重叠”，本质是后续内容塌陷进浮动区域，而不是层叠打架。比如左侧浮动菜单后，右侧正文文字跑进菜单底下——这不是 z-index 能解决的，是文档流断裂。
推荐做法：在浮动元素之后插入一个清除元素，或使用 BFC 触发方式。
立即学习“前端免费学习笔记（深入）”；
- 用伪元素清除（推荐）：
.clearfix::after { content: ""; display: table; clear: both; }然后给浮动容器加class="clearfix" - 触发 BFC 更简洁：给浮动的兄弟容器设
overflow: hidden（或auto）、display: flow-root（现代写法，兼容性较好） - 避免用
clear: both单独加空<div>，冗余且语义差
需要真正控制层叠时，放弃float改用relative+top/left
如果你确实要让两个块在视觉上前后压叠（比如卡片悬停浮起、标签角标），浮动是错误工具。应该用相对定位模拟“浮动感”，同时保留层叠能力。
示例场景：左图右文布局，但希望图片略高于文字，并带阴影盖住文字边缘。
- 图片设
position: relative; z-index: 2;，文字容器设position: relative; z-index: 1; - 用
top: -8px让图片上移，实现“覆盖”效果 - 注意：
position: relative不改变文档流位置，所以不会影响其他元素排版，比float更可控 - 若需响应式，
top值建议用rem或em，避免像素硬编码
flex/grid下完全不需要float和z-index来解决重叠
现在 95% 的“浮动重叠”需求，其实源于还在用老式浮动做整体布局。CSS Grid 和 Flexbox 天然支持层叠控制与空间分配，无需 hack。
比如两栏布局 + 右侧元素盖住左侧边框：
- 用
display: grid; grid-template-columns: 200px 1fr;定义结构 - 右侧区域设
justify-self: start;或margin-left: -12px微调位置 - 需要盖住？直接加
z-index: 1（此时父容器是grid，子项自动获得层叠上下文） - 性能更好：浏览器对
grid的层叠计算比浮动 + 清除 + 定位组合更轻量
真正难处理的，往往是 legacy 代码里嵌套多层浮动 + inline-style + JS 动态添加 class 的混合体——这种情况下，先统一用 display: flow-root 封装旧模块，再逐步替换，比硬调 z-index 更可持续。
