父元素点击失效的根本原因是高度塌陷导致offsetheight为0，使其在渲染树中无实际区域；浮动子元素脱离文档流，父容器计算高度时忽略它们，造成视觉存在但交互不可达。
父元素无法触发点击事件，根本不是它“没绑事件”，而是它压根没有可点击的渲染区域——offsetHeight 为 0，鼠标划过那片位置，浏览器连事件捕获阶段都跳过了。
父容器高度塌陷：点击失效的真正起点
浮动子元素脱离文档流，父容器在计算自身高度时直接忽略它们。结果就是：offsetHeight === 0，哪怕你肉眼看到子元素完整显示，父元素在渲染树里也是一条“隐形线”。这时给父元素加 onclick 或监听 click，事件根本不会派发。
- 用 DevTools 选中父元素，看右侧面板「Layout」里 height 是否为 0 或接近 0
- 临时加
border: 1px solid red，如果红色边框没包住子元素，塌陷就坐实了 -
:hover同样不触发——这不是选择器问题，是父元素“不存在”于交互坐标系中
清除浮动后仍点不了？查层叠上下文遮挡
清除浮动（如用 .clearfix::after）只解决塌陷，不解决层级。浮动元素本身不创建层叠上下文，但极易被其他元素盖住：
- 下方一个
position: relative的兄弟块，哪怕没写z-index，也会自动进入新层叠上下文，默认层级高于浮动流 - 祖先元素有
transform、opacity: 0.99或will-change，已创建封闭层叠上下文，子元素的z-index失效 - 检查「Computed」面板里
pointer-events是否为none（包括从祖先继承来的）
伪元素清除失效：最隐蔽的“以为修好了”陷阱
很多人复制的 .clearfix::after 代码漏掉关键项，伪元素根本没生成，清除等于白做。浏览器不报错，但父容器持续塌陷。
-
.clearfix::after必须同时含三件套：content: ""+display: table+clear: both - 仅写
clear: both而无content: ""，伪元素不创建，清除逻辑静默失败 - 在 DevTools 中展开父元素的
::after，确认它存在且offsetHeight > 0
现代项目别硬扛 float：flow-root 是更干净的解法
display: flow-root 是 CSS 专门为这事设计的值，一行代码创建 BFC，让父容器重新包含浮动子项，且不裁剪溢出内容（比如 position: absolute 下拉菜单、动画位移）。
- 兼容性已足够好：Chrome 58+、Firefox 57+、Safari 10.1+、Edge 79+
- 比
overflow: hidden安全：不切掉任何溢出内容，也不影响transform动画的 hit-testing - 比
position: relative + z-index可靠：不依赖层叠上下文的嵌套深度，避免“加了却没用”的困惑
真正难处理的从来不是 float 本身，而是它和层叠上下文、BFC、事件分发机制之间那些隐式耦合——改一行 padding，可能就要重调三处 clear 和 z-index；而 flow-root 或 flex 把这些全都解耦了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
