overflow:hidden 直接裁剪溢出内容且不提供滚动，适用于明确设计意图的截断场景；overflow:auto 仅在内容溢出时显示滚动条，更克制，适合内容长度不确定的区域。
overflow:hidden 直接裁剪，不提供滚动机制
当容器尺寸固定，且内部内容（比如长文本、浮动元素、绝对定位子元素）超出边界时，overflow:hidden 会强制隐藏溢出部分，不显示滚动条，也不允许用户手动滚动查看。它本质是「视觉裁剪」，不影响布局流，但可能意外截断重要内容。
- 适用于卡片截断、头像裁圆、防止文字撑破容器等设计意图明确的场景
- 对
position: absolute子元素也生效——即使子元素脱离文档流，只要其盒在父容器可视区域内有重叠，超出部分仍被裁剪 - 注意：它会**触发 BFC（块级格式化上下文）**，因此常被用来清除浮动，但这只是副作用，不是主要用途
- 在 Safari 或旧版 iOS WebView 中，若父容器未设置
height或max-height，仅靠overflow:hidden可能无法如预期裁剪（需显式高度约束）
overflow:auto 在需要时才显示滚动条
overflow:auto 的行为取决于内容是否真正溢出：只有当内容高度/宽度超过容器可用空间时，浏览器才自动显示滚动条（横向或纵向），否则保持无滚动条状态。它比 overflow:scroll 更克制，避免了“永远显示空滚动条”的 UI 干扰。
- 适合不确定内容长度的区域，如评论列表、日志面板、富文本编辑器预览区
- 滚动条样式不可控（各浏览器默认不同），若需自定义，必须用
overflow:hidden+ 自研滚动逻辑，或使用::-webkit-scrollbar（仅限 WebKit 内核） - 在 Flex 或 Grid 容器中，若子项使用
min-width: 0或min-height: 0，可避免overflow:auto失效（因 flex item 默认不收缩，导致内容不触发溢出判断） - 移动端要注意：iOS Safari 对
overflow:auto的 touch 滚动支持良好，但若容器内含position: fixed元素，可能引发滚动卡顿或失效
常见误用：overflow:hidden 无法解决塌陷，却常被滥用
很多人把 overflow:hidden 当作「万能清浮动方案」，但它其实只是通过触发 BFC 来让父容器重新包含浮动子元素。这种写法掩盖了布局意图，且在某些组合下会出问题：
- 当父容器同时设置了
transform、filter或will-change，也会创建新的层叠上下文和 BFC，此时overflow:hidden的清浮动效果反而被覆盖或干扰 - 若父容器本身是
display: flex或display: grid，浮动子元素本就不参与主轴布局，此时加overflow:hidden不仅无效，还可能意外裁剪内容 - 更清晰的做法是：用
display: flow-root显式创建 BFC，语义明确，无副作用
移动端 touch 滚动必须配合 -webkit-overflow-scrolling
在 iOS 5–12 的 WebKit 浏览器中，overflow:auto 容器默认不支持原生惯性滚动，触控体验生硬。需额外添加：
立即学习“前端免费学习笔记（深入）”；
div.scrollable {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
这个属性已废弃，但在老项目兼容中仍常见。现代 iOS（13+）已默认启用平滑滚动，但若发现滚动卡顿或无法拖拽，检查是否遗漏该声明；同时注意：-webkit-overflow-scrolling: touch 会强制创建一个独立的合成层，可能影响性能或与其他 transform 层冲突。
真正容易被忽略的是：当容器内有 input 或 textarea 获得焦点时，iOS 会自动将页面滚动到输入框位置，若外层用了 overflow:auto 且高度不足，可能导致输入框被虚拟键盘遮挡——这时光靠 CSS 无法解决，得结合 JS 监听 focus 事件做偏移调整。
