浮动导致父容器高度塌陷，使后续元素定位基准错乱，热区与视觉位置不重合；应使用 display: flow-root（现代）或伪元素清除法（.clearfix::before/.clearfix::after）修复。
浮动元素导致点击区域偏移怎么办
直接说结论：不是鼠标没对准，是浮动让父容器高度塌陷，导致后续元素的定位基准错乱，热区（比如 button 或 a 标签）视觉位置和实际可点击区域不重合。
常见现象是——光标悬停在按钮上方没变手型，或者点了空白处却触发了按钮；用开发者工具选中元素，会发现它的 boundingClientRect 显示的 top/left 和视觉位置明显对不上。
- 根本原因是浮动元素脱离文档流，父容器无法自动包裹它，后续兄弟元素按“父容器高度为 0”的状态布局
- 别只靠
clear: both给下一个块级元素加，这只能压住它，不能修复父容器自身高度 - 现代项目优先用
display: flow-root，它创建 BFC 且不改变子元素浮动行为，兼容性从 Chrome 64+/Firefox 59+ 开始支持 - 老项目要兼容 IE11，用伪元素清除法比
overflow: hidden更安全（后者可能意外裁剪阴影或溢出内容）
伪元素清除浮动的标准写法
这是目前最稳妥、无副作用的清除方式，尤其适合封装成通用工具类。
错误写法：.clearfix::after { content: ""; display: block; clear: both; } —— 缺少 height: 0 和 visibility: hidden，可能撑开多余行高或影响可访问性。
立即学习“前端免费学习笔记（深入）”；
- 必须设
content: ""，否则伪元素不渲染 - 必须设
display: table或block，inline无法触发clear - 推荐加
height: 0+visibility: hidden，避免干扰行内布局或读屏器 - 不要用
font-size: 0清除，它会影响子元素继承，且对 inline-block 子项有副作用
.clearfix::before,
.clearfix::after {
content: "";
display: table;
height: 0;
visibility: hidden;
}
.clearfix::after { clear: both; }
.clearfix { *zoom: 1; } /* IE6/7 hack，仅当需要时保留 */
display: flow-root 替代浮动布局的时机
如果浮动只是为实现多栏排版（比如文字环绕图片、两栏卡片），现在完全可以用 flow-root 配合 float 子元素，同时解决塌陷和热区问题。
注意：它本身不禁止子元素浮动，而是让父容器生成新的 BFC，从而包含浮动子项——所以热区计算基于真实的容器尺寸。
- 比
overflow: hidden更干净，不会意外隐藏box-shadow或position: absolute的子元素 - 不兼容 IE，若项目还需支持 IE11，就别单独依赖它，需搭配降级方案
- 和 Flex/Grid 不冲突，但没必要混用；如果已经用
display: flex布局，就根本不需要清除浮动 - Vue/React 组件中建议直接加在包裹
div上，而不是作用于组件根标签（避免影响组件自身 display 语义）
调试热区错位的三个关键检查点
别急着改 CSS，先确认是不是浮动导致的——很多“热区偏移”其实是 transform、pointer-events 或 z-index 搞的鬼。
- 打开浏览器开发者工具，选中疑似错位的元素，看右侧面板里
Computed中的height和offsetHeight是否为 0 或远小于视觉高度 - 临时给父容器加
outline: 1px solid red，观察是否真的“看不见边框”，确认塌陷存在 - 在控制台执行
getBoundingClientRect()对比元素实际坐标和鼠标事件clientX/clientY，差值超过 2px 就说明布局计算异常
浮动引起的热区问题，本质是父容器尺寸不可靠。修对了清除方式，热区自然回归；修错了，可能把问题藏得更深——比如用 overflow: auto 看似好了，但滚动条出现后又引发新交互问题。
