点击区域消失通常是浮动塌陷导致父容器高度为0，应使用伪元素清除法（如.clearfix::after{content:"";display:table;clear:both}），现代布局中优先采用Flex或Grid替代浮动。
点击区域消失？先确认是不是浮动塌陷导致父容器高度为0
浮动元素脱离文档流后，父容器如果没设置高度，会“看不见”子元素，实际点击区域只剩一条线甚至完全空白。这不是事件绑定问题，而是视觉和布局层面的失效。
- 用浏览器开发者工具检查父容器
offsetHeight或getBoundingClientRect()，如果高度接近 0，基本就是塌陷 - 常见于导航栏、卡片列表、侧边栏等用
float: left或float: right排版的旧式布局 -
overflow: hidden能触发 BFC 清除浮动，但会意外裁剪溢出内容（比如下拉菜单、tooltip） - 更稳妥的是用
::after伪元素清除：在父容器加clearfix类，配合content: ""+display: table或clear: both
推荐的清除浮动写法：兼容性好且不干扰布局
别用 clear: both 单独加空标签，也别依赖 overflow: auto 这种副作用方案。现代项目里最稳的是伪元素清除法，IE8+ 全支持。
- 给浮动容器添加类：
class="clearfix" - CSS 写法必须包含
content: ""和display: table（或block），否则伪元素不渲染 - 关键点：
display: table比block更少引发 margin 折叠问题；clear: both必须作用于伪元素本身，不是父容器 - 示例：
.clearfix::after { content: ""; display: table; clear: both; }
Flex 或 Grid 布局下还用得着清除浮动吗？
不用。一旦父容器设了 display: flex 或 display: grid，子元素自动参与该格式化上下文，不再脱离文档流，浮动效果本身就被忽略（float 对 flex item 无效）。
- 如果你还在 flex 容器里对子项写
float: left，它不会起作用，且可能掩盖真实布局意图 - 遇到点击失效，优先检查是否误用了
pointer-events: none、z-index 层级覆盖、或父容器被其他绝对定位元素遮挡 - 老项目迁移时，别强行保留浮动逻辑——直接改用
justify-content或grid-template-columns更可靠
清除浮动后点击仍无效？重点查这三处
清除浮动只是让父容器“看见”子元素，但点击区域是否可用，还取决于层叠上下文、事件捕获路径和元素可见性。
立即学习“前端免费学习笔记（深入）”；
- 父容器或某层祖先有
opacity: 0、visibility: hidden或pointer-events: none，会拦截所有鼠标事件 - 浮动元素本身设置了
position: relative+z-index: -1，可能被父容器背景盖住（尤其当父容器有background-color） - 移动端要注意
touch-action: none或-webkit-tap-highlight-color: transparent是否误配，导致点击无响应
