浮动元素点击不到的主因是被上层元素视觉遮挡或事件拦截，需检查pointer-events、层叠上下文、盒模型偏移及伪元素清除失效等问题。
点击不到浮动元素？先查它是不是被盖住了
浮动元素本身不创建层叠上下文，但极易被其他已定位或触发新层叠上下文的元素视觉遮挡。你看到按钮在那儿，不代表它能响应点击——鼠标事件可能全被上层元素吃掉了。
用开发者工具选中目标元素，看右侧面板「Computed」里 pointer-events 是否为 none（包括从祖先继承来的）；同时检查任意祖先是否设置了 opacity: 0、visibility: hidden 或 clip-path ——这些都占空间且拦截事件。
- 临时加
outline: 2px solid red到该元素，确认高亮框是否和视觉位置一致；若 outline 偏移或没出现，说明有别的元素在它上面占位 - 打开 DevTools 的「Rendering」→ 勾选
Show layer borders和Paint flashing，点一下目标区域：如果闪动位置偏移，说明盒模型和渲染位置不匹配 - 运行
console.log($0.getBoundingClientRect())（$0 是当前选中元素），对比返回的top/left/width/height和你实际点击的位置
浮动按钮被下方 relative 定位的 div 盖住怎么办
这是高频陷阱：按钮设了 float: right，紧挨着一个 position: relative 的容器（比如表格、表单区），后者虽未设 z-index，却因定位属性自动进入新层叠上下文，默认层级高于浮动流，结果“点得见、点不着”。
- 最直接解法：给那个
position: relative的 div 加clear: both，强制它下移，不与浮动按钮争夺同一行 - 更稳妥做法：给浮动按钮本身加
position: relative+z-index: 1—— 注意，单写z-index: 1不加position是无效的 - 如果父容器已有
transform、opacity: 0.99或will-change，它已创建新层叠上下文，子元素的z-index只在内部生效，此时加position: relative也出不来
清除浮动后还是点不了？重点查伪元素和 display
很多人复制 .clearfix::after 代码时漏掉关键声明，导致伪元素根本没渲染，清除失效。浏览器不会报错，但父容器依然塌陷，按钮实际点击区域只剩一条线。
- 确保伪元素有完整三件套：
content: ""+display: table（或block）+clear: both - 检查该伪元素是否被设了
display: none、visibility: hidden或opacity: 0—— 它们会让清除逻辑静默失败 - 用 DevTools 选中父容器，展开 ::after 伪元素，确认它真实存在且尺寸非零；再看父容器的
offsetHeight是否正常包裹子元素
为什么加 position: relative 有时“能点到”但不可靠
给浮动元素加 position: relative 的本质作用，是让它进入“层叠等级 6”，比纯浮动元素（等级 5）靠前一点。但这只对同级 position: static 兄弟有效，一旦周围有其他定位上下文介入，就立刻失效。
- 单写
position: relative不设z-index，层级提升非常有限，不能解决跨上下文遮挡 - 如果浮动元素外层套了
overflow: hidden或transform的容器，它可能已创建 BFC 或新层叠上下文，子元素再怎么调z-index都出不去 - 更危险的是：加了
position: relative后你以为“修好了”，却漏掉了::before/::after伪元素或某层祖先的pointer-events: none继承
真正卡住的往往不是浮动本身，而是它引发的文档流错乱 + 层叠上下文嵌套 + 事件捕获路径偏移。别指望一个 CSS 属性兜底，必须逐层验证盒模型、层叠顺序和事件落点。尤其是伪元素是否渲染、父容器是否塌陷、祖先是否意外拦截——这三个地方最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
