overflow: auto 在浮动父容器中不工作，因浮动元素脱离文档流致父容器高度塌陷为0px，浏览器误判无溢出；应改用 display: flow-root 创建BFC以正确包裹浮动子项并正常触发滚动。
浮动元素本身不参与文档流，父容器高度塌陷后，overflow 的判定逻辑就会失效——滚动条“该出现时不出现”，或“不该出现时乱出现”。这不是浏览器 bug，而是 BFC 触发时机与浮动脱离行为的必然冲突。
为什么 overflow: auto 在浮动父容器里不工作？
父容器设置了 overflow: auto，但子元素全用 float: left，此时父容器 computed height 往往是 0px。浏览器认为“内容没溢出”，自然不显示滚动条——哪怕你眼睛看到内容明显超出了视口。
- 用开发者工具选中父容器，在 Computed 面板里查
height和scrollHeight，若前者远小于后者，基本就是这个原因 -
overflow: hidden能“撑高”父容器（靠触发 BFC），但它会裁剪内容，不是滚动解法 - 别在父容器上同时写
height: 200px和overflow: auto：固定高度下，浮动子项根本不会被纳入高度计算，滚动区域实际为 0
用 display: flow-root 替代 overflow 清浮动
display: flow-root 是现代标准解法：它创建 BFC，让父容器正确包裹浮动子项，且不改变溢出行为——既不清除也不裁剪，滚动条按真实内容溢出触发。
- 直接加在浮动父容器上：
.container { display: flow-root; } - Chrome 58+ / Firefox 57+ / Safari 10.1+ 均支持；Safari 15.4 起稳定，旧版可降级用伪元素
- 不要加在
html或body上——只作用于真正含浮动子项的局部容器 - 避免和
float同时出现在同一元素上，语义冲突且无意义
老项目兼容处理：伪元素 ::after 清除必须写对
如果要兼容 IE11 或旧安卓 WebView，::after 是最稳妥的清除方式，但写错一行就白搭。
立即学习“前端免费学习笔记（深入）”；
- 必须作用于父容器本身，不能只加在某个子元素末尾：
.parent::after { content: ""; display: table; clear: both; } - 别用
display: block——它不触发 BFC，无法解决高度塌陷；display: table或display: flex才行 - 禁止给清除元素设
height: 0、font-size: 0或visibility: hidden，这些会让它失去撑高能力 - 临时验证：加个
border: 1px solid red到父容器，看是否终于“包住”了所有浮动子项
真正麻烦的不是写对 flow-root，而是那些 JS 动态插入的浮动元素——比如第三方弹窗、广告脚本、CMS 插件生成的 float: right 按钮。它们绕过你的 CSS，又恰好卡在某个分辨率下触发横向滚动。这种问题没法靠一套规则兜底，得靠 DevTools 筛选 [style*="float"] 手动揪出来改。
