浮动元素“点不中”的根本原因是父容器塌陷导致盒模型错位，应优先用 display: flow-root 清除浮动并创建 BFC，若需兼容旧浏览器则确保 clearfix::after 含 content: ""、display: table、clear: both 三件套，并排查层叠上下文遮挡。
浮动元素“点不中”，几乎从来不是事件监听没绑好，而是它根本不在你点击的位置上——视觉和盒模型严重错位。直接上最稳解法。
检查父容器是否塌陷：用 offsetHeight 和 outline 快速验证
浮动让子元素脱离文档流，父容器高度常变成 0 或极小值，导致后续兄弟元素上浮，点击热区偏移。这不是玄学，是能立刻验证的。
- 打开 DevTools，选中浮动元素的直接父容器，运行
console.log($0.offsetHeight)—— 若结果 ≤ 1，基本坐实塌陷 - 给该父容器临时加
outline: 2px solid red：若只看到顶部细线或完全无边框，说明它没撑开 - 给疑似“点不中”的兄弟元素（比如按钮）加
outline: 2px solid blue：若高亮框悬浮在文字上方、缩成一条线，或根本没出现，就是位置已偏移
清除浮动别用 overflow: hidden，优先上 display: flow-root
overflow: hidden 虽能触发 BFC，但会意外裁剪下拉菜单、tooltip、阴影等所有溢出内容，属于带副作用的“土办法”。现代项目有更干净的替代。
- 给浮动元素的父容器直接加
display: flow-root：一行 CSS，自动创建 BFC，包裹浮动子项，不引发 margin 折叠，无裁剪风险 - 兼容性够用：Chrome 58+、Firefox 57+、Safari 10.1+、Edge 79+ 均支持（截至 2026 年）
- 若需支持老浏览器（如 IE11），退而用
.clearfix::after，但必须三件套齐全：content: ""+display: table+clear: both；漏任一都静默失效
点得见却点不着？重点查层叠上下文遮挡
浮动元素本身不创建层叠上下文，但极易被其他元素盖住。一个 position: relative 的 div，哪怕没设 z-index，也会自动进入新层叠上下文，默认层级高于浮动流。
- 用 DevTools 选中目标浮动元素，看「Computed」面板中
z-index是否为auto；再查contain和will-change是否被设，它们会隐式触发层叠上下文 - 临时给浮动元素加
position: relative; z-index: 1（注意：单写z-index: 1无效） - 若父容器已有
transform、opacity: 0.99或will-change，它已创建独立层叠上下文，此时子元素的z-index只在内部生效，加了也出不来
伪元素清除后仍失效？盯死 ::after 是否真实渲染
很多人复制的 .clearfix::after 代码缺关键声明，浏览器不报错，但伪元素压根没生成，清除逻辑彻底静默失败。
- 在 DevTools 中展开父容器节点，手动找
::after伪元素：确认它存在、尺寸非零（宽高 > 0）、且未被display: none或visibility: hidden干扰 - 检查父容器的
offsetHeight是否已包含浮动子项高度——若仍是 0，说明伪元素没起作用 - 别用
font-size: 0或visibility: hidden替代height: 0：前者影响继承，后者可能干扰读屏器，且不保证清除效果
真正难调的不是 clear 写在哪，而是盒模型、层叠上下文、DOM 渲染顺序这三者隐式耦合——改一行 padding，所有 float 和 z-index 都可能失效。长期来看，display: flex 或 display: grid 才是根治方案，它们天然不脱离文档流，点击区域由浏览器原生保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
