兄弟元素点击事件失效的根本原因是布局错位：浮动导致父容器塌陷、兄弟元素上浮，或层叠上下文遮挡。应优先使用 display: flow-root 修复，兼容老浏览器可用 clearfix，长期推荐 flex 布局。
兄弟元素点击事件失效，根本不是事件被“禁用”，而是它实际渲染位置和你看到的位置不一致——浮动让父容器塌陷、兄弟元素上浮，鼠标点下去时，坐标早已落在别的元素上。
父容器高度塌陷导致兄弟元素上浮错位
浮动元素脱离文档流，父容器计算高度时直接忽略它，offsetHeight 变成 0 或极小值。此时紧挨着父容器的兄弟块级元素（比如页脚、按钮栏）会向上顶替本该被浮动元素占据的空间，视觉上还在原位，但 getBoundingClientRect() 返回的 top 值已大幅上移。
- 用开发者工具选中该兄弟元素，在「Computed」面板里搜
height和top，若height异常小、top明显负偏移，基本就是塌陷导致的错位 - 临时给父容器加
border: 1px solid red：如果只显示顶部细线或完全不显边框，说明塌陷属实 - 给兄弟元素加
outline: 2px solid blue：高亮框若悬浮在文字上方、或缩成一条线，证明它没真正“撑开”自身内容区
浮动元素遮挡兄弟元素的层叠上下文冲突
一个 float: right 的导航按钮，下方紧跟着 position: relative 的内容区，后者虽未设 z-index，却因定位属性自动进入新层叠上下文，默认层级高于浮动流——结果兄弟元素（内容区）在视觉和事件层面都盖住了按钮，但你误以为是按钮“点不了”。
- 检查兄弟元素的「Computed」面板中
z-index是否为auto，再看contain和will-change等是否触发了隐式层叠上下文 - 运行
console.log($0.style.zIndex)和console.log(getComputedStyle($0).contain)快速确认 - 临时给浮动元素加
position: relative; z-index: 1（注意：单写z-index无效），若点击恢复，就坐实了遮挡问题
清除浮动后仍失效？重点查伪元素和 display 声明
很多人复制的 .clearfix::after 代码缺关键项，浏览器不报错，但清除逻辑静默失败。父容器依然塌陷，兄弟元素的点击热区只剩文字那条线。
-
.clearfix::after必须同时含三件套：content: ""+display: table（比block更少引发 margin 折叠） +clear: both - 用开发者工具展开父容器的
::after伪元素，确认它真实存在、尺寸非零；再看父容器的offsetHeight是否包含浮动子项 - 若父容器已是
display: flex或display: grid，::after默认不参与主轴排列，此时应直接换用display: flow-root
现代项目里最省心的修复路径
别在浮动上反复调试清除逻辑和 z-index 层级。兄弟元素点击失效，本质是布局模型已过载——浮动本就不该用于整体页面结构。
- 优先给浮动元素的父容器加
display: flow-root：Chrome 58+/Firefox 57+/Safari 10.1+ 全支持，一行生效，无裁剪副作用 - 若需兼容老环境（如 IE11），用带
zoom: 1的.clearfix，但必须确保content和display不遗漏 - 长期方案：把兄弟元素所在的整个区块改用
display: flex，例如flex-direction: column控制垂直顺序，天然规避塌陷与遮挡耦合问题
真正难调的从来不是 clear: both 写在哪，而是当 box-sizing、margin、伪元素 display 和层叠上下文隐式触发混在一起时，改一处，所有偏移值都要重算。而 flex 和 flow-root 把这些变量解耦了——你只管内容，布局引擎负责对齐和包裹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
