浮动元素点击失效主因是父容器塌陷或视觉遮挡：先检查父容器是否因未清除浮动而高度为0，再确认是否被上层元素遮挡或pointer-events被误设。
浮动元素点击失效，90%不是事件穿透问题，而是它根本没被渲染出有效点击区域——先查父容器是否塌陷、再查是否被视觉遮挡。
检查父容器是否塌陷导致a标签“悬空”
浮动元素脱离文档流后，若父容器未清除浮动且未设高，容器实际高度为0。此时 a 标签虽在 DOM 中存在、:hover 也生效，但点击区域可能落在“空盒子”里。
- 用 DevTools 选中父容器，看蓝色高亮框是否包裹住浮动子元素；临时加
border: 1px solid red立刻暴露塌陷 - 别急着调
z-index或position，优先修复布局：用::after伪元素清除浮动，而非overflow: hidden或孤立的clear: both - 确保伪元素有完整三件套：
content: ""+display: table（或block）+clear: both；漏掉任意一项，清除就静默失败
确认是否被上层元素视觉遮挡
浮动元素本身不创建层叠上下文，但极易被已定位（position: relative）、有 transform、opacity: 0.99 或 will-change 的兄弟/祖先元素盖住——你看见按钮，不代表它能响应点击。
- 用 DevTools 选中目标元素，看右侧面板「Computed」中
pointer-events是否为none（包括从祖先继承） - 勾选「Rendering」→
Show layer borders和Paint flashing，点击目标区域：若闪动位置偏移，说明盒模型与渲染位置不匹配 - 运行
console.log($0.getBoundingClientRect())（$0是当前选中元素），对比返回坐标与你实际点击的位置
验证 pointer-events 是否被误用或继承干扰
pointer-events: none 只对当前元素生效，且一旦设在父级，整棵子树都会被跳过命中测试——子元素写 pointer-events: auto 完全无效。
立即学习“前端免费学习笔记（深入）”；
- 如果浮动元素是装饰性图标（如右上角关闭按钮），又盖住了下方链接，直接给它加
pointer-events: none即可；但它内部若有子按钮，不能靠“父设 none + 子设 auto”来救 - 检查是否误把
pointer-events: none加在父容器上，而真正遮挡的子元素（比如水印、伪元素::before）没加 - 用 DevTools 展开父容器的
::after，确认伪元素真实存在且尺寸非零；再看父容器的offsetHeight是否正常包裹子元素
为什么加了 position: relative + z-index 还是点不到？
z-index 只在**同一层叠上下文内**起作用。父容器只要用了 transform、opacity < 1、filter 或 will-change，就自动创建新层叠上下文，子元素的 z-index 就只跟这个新上下文内部比，和外部完全无关。
- 打开「Computed」面板，查目标元素的
z-index是否显示为具体数值（非auto） - 逐级往上查祖先，看是否有任意一个触发了新层叠上下文；修复思路不是硬调更大数字，而是移除触发属性，或把目标元素提到该上下文之外（例如挂到
body下） - 临时给浮动按钮加
position: relative+z-index: 1可行，但前提是它的父容器没提前创建隔离的层叠上下文
真正卡住人的，永远是“以为加了 pointer-events: none 就万事大吉”，却忽略了它所在的 DOM 位置、祖先节点的状态，以及伪元素是否真实生效——这些地方一漏，调试就会陷入死循环。
