浮动元素重叠点击失效的核心是脱离文档流，须先清除浮动恢复布局秩序，再配合正确定位和堆叠上下文设置z-index；现代布局优先选用flexbox、grid等替代方案。
浮动元素重叠遮挡、点击失效，核心问题往往不是 z-index 没设，而是浮动本身破坏了文档流，导致后续元素位置错乱、层叠关系混乱。单纯加 z-index 常常无效，必须配合清除浮动（clear）和合理布局结构。
先确认是否真需要浮动
现代布局中，浮动（float）已基本被更可控的方式替代：
- 文字环绕图片？用
shape-outside或自然流式排版更稳妥 - 多栏布局？优先用
flexbox或grid，语义清晰、无清除烦恼 - 仅为了“让元素靠左/右”？
text-align、margin: auto或 flex 的justify-content更安全
如果必须用浮动，务必清除后续影响
浮动元素脱离文档流，后面的内容会“上浮”进空白区，造成视觉重叠和点击区域错位。不能只靠 z-index 补救，得先恢复布局秩序：
- 在浮动元素的父容器上设置
overflow: hidden或overflow: auto（触发 BFC，自动包裹浮动子元素） - 或在浮动元素之后、下一个要正常布局的元素上加
clear: both - 避免用空
，推荐伪元素清除法：.clearfix::after { content:""; display:table; clear:both; }
给浮动容器添加class="clearfix"
z-index 生效的前提是定位上下文正确
z-index 只对定位元素（position: relative/absolute/fixed/sticky）有效，且作用范围受限于最近的定位祖先（堆叠上下文）。常见误区：
立即学习“前端免费学习笔记（深入）”；
- 给浮动元素加
z-index却没设position→ 完全不生效 - 父容器有
transform、opacity 或will-change→ 自动创建新堆叠上下文，子元素的z-index被限制在内部 - 两个同级浮动块，一个设了
z-index: 2，另一个没设position→ 后者按普通流渲染，可能覆盖前者
交互失效？检查点击区域是否真的在目标元素上
浮动导致元素视觉位置和实际盒模型错位，鼠标事件可能落在“看不见的层”上：
- 用浏览器开发者工具的“元素选择器”悬停检查，看高亮框是否准确套住目标
- 临时加
outline: 2px solid red查看真实边界 - 若按钮被遮挡，不要只调
z-index，先确保它在正确的文档流位置 —— 清除浮动后，再设position: relative; z-index: 10
基本上就这些。浮动不是不能用，但它的副作用太容易被低估。优先用现代布局方案，非用不可时，清除浮动 + 正确定位 + 理解堆叠上下文，三者缺一不可。
