父容器点击区域变小的根本原因是浮动导致高度塌陷，使offsetheight趋近于0；必须用.clearfix::after清除浮动，并为内部a标签设置display:block和padding才能恢复可点击区域。
父容器点击区域变小，根本不是点击事件绑错了，而是父容器高度塌陷后，实际可响应鼠标/触摸的区域只剩一条线甚至完全为 0 —— 浏览器只对有渲染尺寸的区域派发事件。
float 让父容器 height 变成 0，点击热区就没了
浮动元素（float: left 或 float: right）会脱离文档流，父容器在计算自身高度时直接“看不见”它们。如果父容器内没有其他非浮动内容，offsetHeight 就是 0，getBoundingClientRect() 返回的高度也趋近于 0。
- 用开发者工具选中父容器，在 “Computed” 面板里看
height和offsetHeight，若为 0 或极小值（如 1px），基本可断定是塌陷 - 常见于导航栏、卡片列表、侧边栏等旧式 float 布局，尤其当子项全是
float且无文字等普通流内容时 -
clear: both加在父容器上完全无效——它只对兄弟级块元素生效，不作用于自身
给 a 标签加 padding 不起作用？先检查 display
很多人给导航里的 <a></a> 加了 padding: 12px 20px 却发现点击区还是窄，问题往往出在 display 没设：
- 默认
<a></a>是 inline 元素，padding-top/padding-bottom在视觉上无效（虽会占空间，但不撑高可点击区域） - 必须显式设置
display: block或display: inline-block，让 padding 生效 - 搭配
box-sizing: border-box，避免 padding 导致总宽高意外溢出 - 别只依赖
line-height撑高——字体缩放、换行或中英文混排时容易失效
清除浮动 ≠ 点击区自动变大，两步缺一不可
清除浮动只是让父容器“感知”到子元素存在、能正确撑高；但点击区是否够大，还取决于内部可交互元素自身的盒模型设置。
- 清除浮动推荐用
.clearfix::after伪元素法：content: ""+display: table+clear: both，IE8+ 全支持 - 现代项目优先用
display: flow-root，一行 CSS 触发 BFC，无 margin 合并、无裁剪副作用 - 清完浮动后仍点不中？重点查：
pointer-events: none是否误设在祖先链上；z-index: -1是否让元素被背景盖住；opacity: 0或visibility: hidden是否隐藏了交互能力
最易被忽略的一点：清除浮动和扩大点击区是两个独立动作。前者解决布局错位，后者解决交互可用性。很多老项目修了塌陷却忘了给 <a></a> 补 display 和 padding，结果页面看起来正常了，手指还是点不中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
