浮动按钮被 position: relative 的兄弟元素盖住是点击失效的主因：后者创建新层叠上下文，层级高于普通流中的浮动元素；修复需给按钮加 position: relative 和 z-index: 1，或给兄弟元素加 clear: both。
浮动元素被 position: relative 的兄弟元素盖住
这是最常被误判为“点击失效”的真实场景：你看到按钮在右上角，但点下去触发的是下方表格或内容区的事件。根本不是按钮坏了，而是它被盖住了。
原因在于 position: relative 会自动创建新层叠上下文，而浮动元素属于“普通流层叠等级”，默认层级低于它。浏览器渲染时，那个没设 z-index 的 position: relative 容器，已经悄悄压在了浮动按钮上面。
- 临时验证：选中该兄弟容器（比如
.content-area），在 DevTools 的「Computed」面板里看z-index是否为auto；再运行console.log(getComputedStyle($0).contain)，若返回paint或layout，说明它已触发隐式层叠上下文 - 最快修复：给浮动按钮加
position: relative; z-index: 1—— 注意，单写z-index: 1没用，必须配定位属性 - 更稳妥方案：给那个
position: relative的兄弟元素加clear: both，强制它下移，不跟浮动争同一行空间
父容器塌陷导致兄弟元素上浮错位
浮动元素脱离文档流后，父容器高度计算为 0，紧挨着它的下一个兄弟块级元素（比如页脚、操作栏）就会向上顶替空缺位置。你眼睛看到它还在原处，但 getBoundingClientRect().top 可能已偏移几十像素——鼠标点下去，坐标早就不在它的盒模型范围内了。
- 快速确认：选中兄弟元素，看「Computed」里
height是否异常小、top是否为负值；临时加outline: 2px solid blue，若高亮框悬浮在文字上方或缩成一条线，就是塌陷所致 - 别用
overflow: hidden救急：它虽能触发 BFC，但会意外裁剪 tooltip、下拉菜单等溢出内容 - 现代首选：给父容器设
display: flow-root，兼容 Chrome 64+/Firefox 59+，不改子元素浮动行为，也不影响溢出 - 老浏览器兜底：用伪元素 clearfix，确保三件套齐全：
content: ""+display: table+clear: both；漏掉任意一项，清除就静默失败
z-index 负值让浮动元素彻底退出事件流
如果给浮动按钮加了 z-index: -1，哪怕同时写了 position: relative，它也会沉到根层背景之下，浏览器在事件分发阶段就直接跳过它——不是“点不中”，是“根本看不见你”。
-
z-index: -1的元素仍参与渲染（可能视觉可见），但不响应点击、hover、滚轮、键盘焦点，pointer-events: auto也救不回来 - 常见误用：想做背景图层时写
.bg-layer { position: absolute; z-index: -1; }，结果链接热区全失效 - 修复方向：去掉负值，用
z-index: 0或干脆省略；若真需视觉置底，把元素提到直接子级，并确保其父容器没加opacity、transform或will-change
伪元素清除浮动后仍失效？检查 display 和层叠上下文嵌套
很多人复制了 .clearfix::after 代码，DevTools 里也看到伪元素存在，但点击还是不对——问题往往出在 display 声明或父级层叠上下文干扰上。
- 如果父容器已是
display: flex或display: grid，::after默认不参与主轴排列，清除逻辑形同虚设；此时应直接换用display: flow-root - 若父容器有
transform、opacity: 0.99或will-change，它已创建独立层叠上下文，子元素的z-index只在内部生效，再调数字也没用 - 检查伪元素是否被意外隐藏：
visibility: hidden、opacity: 0或font-size: 0都会让清除静默失败；用 DevTools 展开::after，确认尺寸非零、offsetHeight有效
真正难调的不是 float 或 clear 本身，而是它们和 display、层叠上下文、DOM 渲染顺序之间那种隐式耦合——改一行 padding，所有负 margin 和 z-index 都得重算。现代项目里，直接切 display: flex 或 grid 是最省心的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
