overflow:auto并非清除浮动，而是通过触发BFC使父容器包含浮动子元素；它可能误判溢出导致滚动条闪现，且会裁剪绝对定位等内容，现代推荐使用display:flow-root替代。
overflow:auto 触发的是 BFC，不是“清除”浮动
它根本没在清除浮动——float依然生效，子元素照样脱离文档流。真正起作用的是：overflow: auto让父元素生成了一个新的 BFC（块级格式化上下文），而 BFC 的规范行为之一是「包含内部所有浮动元素的边界」，于是父元素高度被撑开，视觉上“像清除了”。但浮动本身没变，后续加 position: absolute 或 transform 仍可能破坏布局。
滚动条出现的真正原因：浏览器误判“溢出”
“auto”的判定逻辑不看语义，只依赖渲染引擎对像素边界的粗略计算。以下情况极易触发意外滚动条：
-
transform: translateY(-20px)或margin-top: -10px的子元素，哪怕视觉上完全在容器内，也可能被算作“越界” - 未设
line-height或vertical-align导致字体下沉，加上box-shadow延伸，微小像素偏差就被当成溢出 - iOS Safari 中配合
position: fixed或硬件加速层时，滚动条会闪烁或卡顿 - 父容器设了
max-height，而浮动子项实际占据高度 >max-height，但你主观认为“内容没超”
overflow:auto 和 overflow:hidden 在清除浮动上效果一样，副作用不同
两者都通过非-visible 的 overflow 值触发 BFC，对“包裹浮动子元素”这件事完全等效。区别只在溢出行为：
-
overflow: hidden：绝不显示滚动条，但会硬裁剪一切超出边界的像素，包括position: absolute的下拉菜单、top: -10px的 tooltip、box-shadow -
overflow: auto：理论上只在真溢出时滚动，但“真溢出”定义模糊；滚动条本身还占宽度（比如width: 100%容器里导致子项换行）
现代项目里，display: flow-root 是更安全的选择
它专为解决这个问题设计，语义清晰、无滚动条风险、不干扰溢出行为：
立即学习“前端免费学习笔记（深入）”；
- 不会误判溢出，不加滚动条
- 不裁剪
position: absolute元素或box-shadow - 兼容性已覆盖所有主流浏览器（Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+）
- 写法简单：
display: flow-root替代overflow: auto即可
如果你还在用 overflow: auto 来“清浮动”，得留意：它不是修复，只是掩盖——一旦加个 transform 动画或 box-shadow，问题就立刻浮出水面。
