overflow: hidden 裁剪溢出内容且不显示滚动条，会创建新层叠上下文，导致绝对定位子元素偏移部分被隐藏；overflow: scroll 强制显示滚动条但占空间；overflow: auto 按需显示滚动条，最常用且安全。
overflow: hidden 会裁剪内容但不提供滚动条
当元素内容超出容器尺寸，overflow: hidden 直接隐藏溢出部分，用户无法看到或滚动到被裁区域。它常用于清除浮动、防止文字撑破卡片、或配合动画做“裁切入口”效果。
常见错误是以为加了 hidden 就能“安全兜底”，结果发现子元素的 position: absolute 或 transform 偏移也被裁掉——这是因为 hidden 会创建新的层叠上下文和块格式化上下文，影响定位参考和滚动容器判定。
- 如果子元素用了
top: -20px向上偏移，且父容器设了overflow: hidden，这部分会直接消失 - Flex 容器设
hidden后，align-items: center可能失效，因为高度计算被截断 - 想保留绝对定位子项可见？改用
overflow: visible或换父级容器
overflow: scroll 强制显示滚动条（含空占位）
overflow: scroll 无论内容是否溢出，都会在对应方向（x/y）渲染滚动条。这在 macOS 上尤其明显：即使没内容可滚，也会留一条灰色滚动条轨道，占用空间、破坏布局对齐。
它适合需要稳定 UI 预留滚动槽的场景，比如固定高度的日志面板、代码编辑器预览区，避免内容增减时页面“抖动”。但注意：移动端 Safari 对 scroll 的默认行为较保守，有时仍不显示滚动条，需额外加 -webkit-overflow-scrolling: touch（仅旧版 iOS 有效）。
立即学习“前端免费学习笔记（深入）”；
- 横向溢出时，
overflow-x: scroll不会自动隐藏纵轴滚动条，要显式写overflow-y: hidden - 滚动条宽度不统一：Chrome 约 17px，Firefox 约 16px，自定义样式要用
::-webkit-scrollbar，但无标准 API 覆盖所有浏览器 - 若只希望“有内容才显示滚动条”，优先选
auto而非scroll
overflow: auto 是更安全的“按需滚动”选择
overflow: auto 是多数情况下的推荐值：仅当内容实际溢出时才显示滚动条，既节省空间又保持交互自然。它不像 scroll 那样强制占位，也不像 hidden 那样彻底丢弃信息。
但要注意它的触发逻辑依赖渲染后的真实尺寸比对——这意味着 JavaScript 动态插入内容后，可能需要触发重排（如读取 offsetHeight）才能让滚动条及时出现；CSS 动画中改变尺寸也可能延迟滚动条响应。
- 表格（
table）内部单元格设auto，通常无效，因表格布局算法会优先拉伸而非溢出 - 配合
max-height使用最可靠，比如max-height: 300px; overflow: auto; - 在 flex 或 grid 容器里，确保父级有明确高度约束，否则
auto可能退化为visible
移动端 touch 滚动和 overscroll-behavior
在 iOS 和 Android Chrome 中，滚动到底部继续拖拽会触发“弹性回弹”（overscroll），有时还连带整个页面滚动或下拉刷新。用 overscroll-behavior: contain 可阻止该行为，让滚动严格限制在当前容器内。
这个属性常被忽略，但它直接影响用户体验：比如模态框里有个长列表，不加 overscroll-behavior，用户滑到顶/底再拖就会误触背景页滚动，甚至意外关闭弹窗。
- 支持值：
contain（阻断传播）、none（同时禁用回弹和传播）、auto（默认） - 必须作用于滚动容器本身，而不是其父级或子级
- 兼容性良好（Chrome 63+/Firefox 59+/Safari 16.4+），但旧版 iOS Safari 需配合
-webkit-overflow-scrolling: touch
overflow 值本身，先确认父容器是否真正“有界”。 
