点击热区偏移本质是父容器高度塌陷导致浮动元素脱离文档流，offsetheight 变为0或极小值，按钮实际悬空渲染；须在紧邻父容器上清除浮动（如::after或flow-root），并验证getboundingclientrect()与paint flashing。
点击热区偏移本质是父容器高度塌陷
浮动元素脱离文档流，父容器无法计算其高度，offsetHeight 变成 0 或极小值。你看到的按钮只是“悬空渲染”，鼠标实际点击位置根本不在它的盒模型范围内。用 DevTools 选中该按钮，看右侧 Computed 面板里的 height 和 offsetHeight；再临时加 outline: 2px solid red 到父容器，如果红色边框没包住按钮，就确认是塌陷。
清除浮动必须作用于直接父容器
在 form 根元素或中间层加 clearfix 没用。必须精准加在包裹该按钮（及其 label、图标等兄弟元素）的**紧邻父容器**上：
- 推荐写法：
.btn-group::after { content: ""; display: table; clear: both; } - 现代替代：
.btn-group { display: flow-root; }（Chrome 58+/Firefox 57+/Safari 10.1+ 支持，无副作用） - 避免
overflow: hidden：它可能裁掉:focus轮廓线、select下拉框或 autocomplete 弹层
z-index 生效需 position 非 static 且未被锁死
直接给按钮写 z-index: 999 没用，因为默认 position: static，z-index 被忽略。但光加 position: relative 也不够：
- 必须同时设
position: relative和z-index（哪怕只是z-index: 2） - 检查祖先元素是否创建了新层叠上下文：如
opacity: 0.99、transform、will-change——一旦存在，子元素的z-index就被关在里面，再高也出不来 - 别让
pointer-events: none继承下来，尤其注意伪元素::before或::after是否覆盖了热区
验证修复效果不能只靠肉眼
修复后别只凭视觉判断，要用工具确认事件落点是否对齐：
- 控制台执行：
console.log($0.getBoundingClientRect())（$0是当前选中按钮），比对返回的top/left是否与视觉位置一致 - DevTools → Rendering → 勾选
Paint flashing，点击时看红色闪动是否精准覆盖按钮 - 如果闪动偏移，说明仍有脱离文档流的干扰元素（比如意外加了
float的兄弟节点，或父容器被transform扭曲坐标系）
实际中最容易被跳过的环节，是验证 getBoundingClientRect() 返回值和 Paint flashing 闪动区域——很多“修好了”的假象，就卡在这一步没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
