overflow:auto不清除浮动，而是通过触发bfc使父容器包含浮动子元素高度，从而解决高度塌陷；但可能引发滚动条、裁剪或ios卡顿等问题，现代推荐用display:flow-root替代。
overflow:auto 触发 BFC 会改变父容器高度计算方式
它本身不改尺寸，但强制创建块级格式化上下文（BFC）后，父容器开始把浮动子元素的高度纳入自身 height 计算——原本塌陷为 0 的高度“突然有了”，视觉上就像尺寸变了。这不是 overflow 的设计目的，而是副作用。
- 常见错误现象：
float子项导致父div边框/背景消失，加了overflow: auto后“恢复”了，误以为是“清浮动”在起作用 - 实际机制：BFC 要求容器包含所有浮动后代，因此 height 从 auto 变为包裹浮动内容后的实际高度
- 如果父容器同时设了
height: 200px，那overflow: auto不会影响高度值，只影响溢出行为
滚动条出现会侵占内容区域宽度
Windows Chrome 默认滚动条宽约 17px，overflow: auto 在需要时插入滚动条，但若没用 box-sizing: border-box 或 scrollbar-gutter: stable，就会把内容区横向压缩，造成布局抖动或文字换行异常。
- 典型表现：加了
overflow: auto后，原本刚好填满的文本突然多出横向滚动条，或右侧内容被裁掉一像素 - 关键参数差异：
box-sizing: content-box（默认）下，width: 300px不含滚动条；box-sizing: border-box下，滚动条宽度被计入 300px 内 - 兼容性注意：macOS Safari 默认隐藏滚动条，判定“是否溢出”可能滞后，导致首次滚动才闪现滚动条
在 Flex/Grid 容器里加 overflow:auto 几乎无效
Flex 项目不参与文档流，float 在 display: flex 父容器中被忽略，此时 overflow: auto 虽然仍创建 BFC，但对“包裹浮动”毫无意义——父容器高度依然塌陷。
- 使用场景：你试图在一个
display: flex的卡片容器里放几个float: left的图标，指望overflow: auto拉高容器——结果失败 - 根本原因：浮动在 Flex 布局中无作用，BFC 无法“包含”一个根本没生效的浮动
- 正确做法：要么去掉
float，用justify-content排列；要么换回display: block，再用overflow: auto+ BFC
百分比高度下 overflow:auto 完全不触发滚动
height: 50% 这类写法依赖父容器有明确高度（非 auto），否则计算结果为 0，overflow: auto 就失去判断基准——内容再长也不会出现滚动条。
- 容易踩的坑：给弹窗内容区设
height: 80%+overflow: auto，结果整个内容直接撑开页面，没滚动 - 调试方法：检查 computed 样式里的
height值，如果是auto或0px，说明百分比没生效 - 可靠替代：用
height: calc(100vh - 120px)或max-height: 60vh，避开继承链依赖
滚动条是否出现、尺寸是否变化、高度是否塌陷——这些都不是 overflow: auto 的直接控制目标，而是它在不同上下文（盒模型、BFC、布局模式、父容器约束）中被动引发的连锁反应。真正要稳住尺寸，得先锁住 box-sizing、确认父级高度可计算、并避免和 float 混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
