overflow: auto 能“修复”高度塌陷，是因为触发 bfc 使父容器重新包含浮动子元素；但它并非清除浮动，存在滚动条误显、内容裁剪、兼容性等风险，不推荐作为通用解决方案。
直接说结论：overflow: auto 能让父元素“看起来”恢复高度，但它不是在“清除浮动”，而是在触发 BFC（块级格式化上下文）——这个副作用恰好让父容器重新包含浮动子元素。它有效，但有隐藏风险，不推荐作为首选方案。
为什么 overflow: auto 有时能“修复”高度塌陷
当父元素设置 overflow: auto（或 hidden、scroll）时，浏览器会为该元素创建一个新的 BFC。BFC 的一个关键特性是：它会包含其内部所有浮动元素的布局边界，从而让父元素重新计算出正确的高度。
这不是 magic，而是 CSS 规范定义的行为。但要注意：
-
auto在某些旧版 Chrome 或 Safari 中可能意外显示滚动条（哪怕内容没溢出） - 它对子元素的溢出行为没有“清除”效果，只是强制包裹 + 可能加滚动条
- 如果子元素用了
transform: translateY(-20px)或负 margin 向上偏移，它仍会被裁剪（和hidden一样）
overflow: auto 和 overflow: hidden 的实际差异
两者都触发 BFC，但表现不同：
-
overflow: hidden：绝不显示滚动条，但任何超出父边界的子元素（如下拉菜单、tooltip、阴影）都会被硬裁剪 -
overflow: auto：只在内容真实溢出时才显示滚动条；但“是否溢出”的判定依赖渲染引擎，有些绝对定位 +translate的元素会被误判为溢出，导致滚动条闪现 - 在 iOS Safari 中，
auto可能导致滚动卡顿或 touch 事件异常，尤其配合position: fixed子元素时
哪些场景下可以谨慎用 overflow: auto
它适合那些你明确需要“内容不外溢 + 允许滚动”的容器，比如：
- 固定高度的卡片内嵌长文本列表（
max-height: 200px; overflow: auto） - 代码预览框、日志输出区等天然需要滚动的区域
- 已确认所有子元素都在父边界内，且不需要 hover 展开、下拉、动画位移等交互
别把它当成通用 clearfix 替代品。一旦你加了 overflow: auto，后续加个 box-shadow 或 top: -10px 的 tooltip，就很可能被切掉一半。
真正容易被忽略的一点
很多人在 DevTools 里看到父元素高度“回来了”，就以为问题解决了。但 overflow: auto 的 BFC 触发是隐式的——它不改变文档流结构，也不影响子元素的 float 行为。这意味着：如果你之后把某个子元素改成 position: absolute，父元素高度又会塌；或者你在同一父容器里混用 float 和 flex，auto 就不再可靠。它只是在特定条件下“碰巧管用”，而不是在解决问题的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
