浮动元素不触发父元素scroll事件的根本原因是父元素高度塌陷导致无滚动空间；浮动使子元素脱离文档流，父元素无法感知其高度，computed height为0，scrolltop恒为0，故scroll事件永不触发。
浮动元素本身不触发父元素的 scroll 事件，根本原因在于：它没让父元素产生可滚动的条件——父元素高度塌陷了，压根没有滚动空间。
父元素根本没有滚动能力，scroll 事件自然不会触发
当子元素设了 float: left 或 float: right，它就脱离文档流。父元素在布局时“看不见”它的高度，height: auto 算出来是 0（或仅剩行高/内边距）。此时即使内容视觉上溢出，父元素的 scrollTop 始终为 0，scroll 事件监听器也永远不会被调用。
- 用开发者工具检查父元素的
computed height，若为0px或远小于预期，就是塌陷实锤 - 临时加
border: 1px solid red到父元素，能直观看到背景/边框只显示一条细线 -
scroll是 DOM 事件，只在元素真实发生滚动位移时触发；高度为 0 的容器连滚动基线都没有
overflow: auto 加了也不管用？那大概率是 BFC + 浮动高度计算冲突
很多人给父元素加了 overflow: auto 就以为万事大吉，结果 scroll 还是不触发。这不是属性没生效，而是浏览器在创建 BFC 后，仍无法准确把浮动子项的高度纳入滚动范围判断——尤其当浮动项后面还跟着普通流内容时，布局顺序混乱会让滚动边界计算失准。
- 现象：横向滚动条出现但拖不动，或纵向滚动条“闪现一下就消失”
- 验证方法：把父元素的
overflow临时改成visible，如果内容能正常撑开、页面可滚动，说明问题出在overflow+ 浮动组合上 - 别依赖
overflow: hidden来“清浮动”再指望它滚动——它会裁剪内容，且不提供滚动能力
真正能让 scroll 事件工作的前提是：父元素有明确高度 + 内容真实溢出
想监听父元素的 scroll，得先让它成为一个合格的滚动容器。浮动不是不能用，但必须让父元素“感知到”子项的存在。
- 现代首选：
display: flow-root—— 创建 BFC 且不裁剪、不干扰绝对定位，兼容 Chrome 58+/Firefox 57+/Safari 10.1+ - 兼容旧版：
.clearfix::after { content: ""; display: table; clear: both; }，确保伪元素是块级且未被隐藏 - 必须搭配高度约束：光清浮动不够，父元素还得有
height、max-height或flex: 1等能触发滚动上下文的样式 - 避免在
body或html上直接设overflow: hidden，否则整个页面滚动都被锁死，scroll事件无处可绑
浮动布局下最容易被忽略的一点：你监听的元素是否真的在滚动？很多时候你以为是父容器在滚，其实是 body 在滚，或者根本没人可滚——得先让父容器“立住”，再谈事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
