overflow: auto 能“撑开”父容器高度是因为触发 bfc，使父容器包含浮动子元素；需满足三前提：无 height/max-height、子元素确为 float、原 overflow 非 visible。
overflow: auto 为什么能“撑开”父容器高度
它本身不撑高，而是通过触发 BFC（块级格式化上下文）让父容器**包含浮动子元素**。只要父容器里有 float: left 或 float: right 的子元素，且没清除浮动，父容器高度就会塌陷为 0；加上 overflow: auto 后，浏览器强制创建 BFC，使父容器把浮动子项纳入高度计算范围。
用 overflow: auto 的三个前提条件
这个方案不是“加了就生效”，必须同时满足：
- 父容器没有设置
height或max-height（否则高度被锁死，BFC 也救不了） - 子元素确实用了
float: left或float: right（position: absolute不在此列） - 父容器的
overflow原值不是visible（因为visible不触发 BFC）
overflow: auto 的典型副作用
它最常被忽略的问题不是“没效果”，而是“效果太强”：
- 在 Safari 或旧版 Chrome 中，即使内容没溢出，也可能出现空白滚动条
-
overflow: auto会裁剪所有超出父容器的内容，比如position: absolute的下拉菜单、tooltip、负 margin 装饰元素 - 如果父容器原本依赖
overflow: visible来支持子元素越界定位，加了 auto 就直接破坏交互逻辑
比 overflow: auto 更稳妥的替代方案
如果你只是想解决浮动导致的高度塌陷，现代项目中优先考虑：
- 把父容器设为
display: flex或display: grid——它们天然包含子项，无需任何 hack - 用伪元素清除浮动：
.clearfix::after { content: ""; display: table; clear: both; }，并确保该类名加在**直接包裹浮动子项的父容器**上 - 给父容器加
min-height: 1px配合display: flow-root（Chrome 64+/Firefox 62+/Safari 15.4+ 支持），这是语义最清晰的 BFC 触发方式
真正卡住的点，往往不是 overflow 写得对不对，而是没确认子元素是否真的在浮动——打开开发者工具，看 computed 样式里的 float 值是不是 none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
