overflow:auto并未清除浮动，而是通过触发bfc使父容器包含浮动子元素高度，但易误判溢出导致滚动条闪现、裁剪绝对定位元素或ios卡顿；display:flow-root是更优替代方案。
overflow:auto根本没清除浮动，只是触发BFC
它不会修改任何float属性，子元素依然脱离文档流；父容器“有高度”是因为创建了BFC，从而把浮动元素的边界纳入自身高度计算——这是规范行为，不是修复功能。你看到布局正常了，不代表浮动被清除了，后续加position: absolute下拉菜单或transform: translateY()动画时，大概率会被裁掉一半。
滚动条可能误显或失效
overflow: auto的“auto”判定非常脆弱，浏览器会把以下情况当成溢出：
- 未设
max-width的图片（哪怕只撑出1px） -
white-space: nowrap里带长URL或连续英文单词 -
transform: translateX(1px)在某些Chrome版本中被误判为溢出 - iOS Safari对
position: fixed子项极其敏感，整个区域可能完全不响应触摸滚动
调试时可临时改用overflow: hidden测试：如果隐藏后布局稳定、滚动消失，基本就是溢出误判。
和现代布局、动画组合时容易冲突
这些组合在真实项目里很常见，但副作用集中：
- Flex/Grid容器里加
overflow: auto对浮动完全无效（因为float在Flex/Grid中被忽略） - 和
transform同时使用，旧版Safari可能强制新建合成层，导致滚动卡顿甚至失灵 - 框架（如Ant Design）在
body上临时加overflow: hidden，会直接让所有overflow: auto区域失能 - 用
overflow: hidden清除浮动时，位移动画帧一旦超出边界就会被硬裁剪，造成视觉中断
display: flow-root才是更干净的替代方案
它专为解决这个问题设计，语义明确且无副作用：
- 只做一件事：创建BFC，不改变溢出行为（不会加滚动条，也不会裁剪内容）
- 不干扰
min-height计算，嵌套Flex容器中也稳定 - 兼容性已足够好：
Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ - 必须兼容IE11时，才退回伪元素方案：
.parent::after { content: ""; display: table; clear: both; }
真正麻烦的不是写哪行CSS，而是搞清「父容器高度算不准」背后到底是浮动塌陷、Flex项目越界，还是overflow判定误伤——先查computed样式里的display和height，再决定动哪根弦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
