为什么CSS浮动后父容器点击区域变小了？

父容器点击区域变小的根本原因是浮动导致高度塌陷，使offsetHeight趋近于0；必须用.clearfix::after清除浮动，并为内部a标签设置display:block和padding才能恢复可点击区域。

父容器点击区域变小，根本不是点击事件绑错了，而是父容器高度塌陷后，实际可响应鼠标/触摸的区域只剩一条线甚至完全为 0 —— 浏览器只对有渲染尺寸的区域派发事件。

float 让父容器 height 变成 0，点击热区就没了

浮动元素（float: left 或 float: right）会脱离文档流，父容器在计算自身高度时直接“看不见”它们。如果父容器内没有其他非浮动内容，offsetHeight 就是 0，getBoundingClientRect() 返回的高度也趋近于 0。

1. 用开发者工具选中父容器，在 “Computed” 面板里看 height 和 offsetHeight，若为 0 或极小值（如 1px），基本可断定是塌陷
2. 常见于导航栏、卡片列表、侧边栏等旧式 float 布局，尤其当子项全是 float 且无文字等普通流内容时
3. clear: both 加在父容器上完全无效——它只对兄弟级块元素生效，不作用于自身

给 a 标签加 padding 不起作用？先检查 display

很多人给导航里的 <a> 加了 padding: 12px 20px 却发现点击区还是窄，问题往往出在 display 没设：

1. 默认 <a> 是 inline 元素，padding-top/padding-bottom 在视觉上无效（虽会占空间，但不撑高可点击区域）
2. 必须显式设置 display: block 或 display: inline-block，让 padding 生效
3. 搭配 box-sizing: border-box，避免 padding 导致总宽高意外溢出
4. 别只依赖 line-height 撑高——字体缩放、换行或中英文混排时容易失效

清除浮动 ≠ 点击区自动变大，两步缺一不可

清除浮动只是让父容器“感知”到子元素存在、能正确撑高；但点击区是否够大，还取决于内部可交互元素自身的盒模型设置。

1. 清除浮动推荐用 .clearfix::after 伪元素法：content: "" + display: table + clear: both，IE8+ 全支持
2. 现代项目优先用 display: flow-root，一行 CSS 触发 BFC，无 margin 合并、无裁剪副作用
3. 清完浮动后仍点不中？重点查：pointer-events: none 是否误设在祖先链上；z-index: -1 是否让元素被背景盖住；opacity: 0 或 visibility: hidden 是否隐藏了交互能力

最易被忽略的一点：清除浮动和扩大点击区是两个独立动作。前者解决布局错位，后者解决交互可用性。很多老项目修了塌陷却忘了给 <a> 补 display 和 padding，结果页面看起来正常了，手指还是点不中。