overflow: hidden 裁剪内容且不触发滚动条；auto 在必要时显示滚动条；overflow-x/y 可独立控制方向；clip 是更严格的裁剪方案，不响应滚动且兼容性较差。
overflow: hidden 会裁剪内容但不触发滚动条
当设置 overflow: hidden 时，超出元素盒模型边界的内容会被直接裁剪，用户无法看到或滚动访问。它常用于清除浮动、防止文字撑破容器，或实现纯 CSS 的“截断”效果（配合 white-space: nowrap 和 text-overflow: ellipsis）。但要注意：hidden 不会保留滚动能力，哪怕内容实际高度远超容器——这点和 auto 或 scroll 有本质区别。
overflow: auto 只在必要时显示滚动条
overflow: auto 是最常用的平衡方案：浏览器自动判断是否需要滚动条。内容未溢出时界面干净；一旦内容超出宽高限制，对应方向（x 或 y）的滚动条才出现。注意两点：
- 不同浏览器对“必要”的判定略有差异，比如某些版本 Safari 在子元素有 transform 时可能误判为未溢出
- 滚动条本身会占用空间（尤其在 Windows 下），可能导致布局微调，可配合
scrollbar-width: none（Firefox）或::-webkit-scrollbar { display: none }隐藏（但隐藏后仍保留滚动能力）
overflow-x 和 overflow-y 允许独立控制两个方向
当需要单向约束时，overflow-x 和 overflow-y 比 overflow 更精准。例如表格列固定宽度但行数动态增长，可设 overflow-x: hidden 防止横向滚动，同时 overflow-y: auto 保持纵向可滚动。常见陷阱：
- 若
overflow-x: hidden且内容含white-space: nowrap，整行文字会被强制截断而非换行 - 当
overflow-y: visible与overflow-x: hidden同时存在，y 方向的“visible”会被强制重置为auto（CSS 规范要求至少一个方向不能是visible）
overflow: clip 是更严格的裁剪替代方案
overflow: clip 是较新的属性值（Chrome 90+、Firefox 93+ 支持），行为类似 hidden 但不触发滚动上下文，也不响应鼠标滚轮或触摸拖拽。它适合做视觉遮罩或动画裁剪区域，比如配合 clip-path 实现平滑过渡。关键区别：
-
clip不生成滚动容器，因此position: sticky在其内部可能失效 - 无障碍支持弱于
hidden，屏幕阅读器可能跳过被裁剪内容 - 不兼容 IE 和旧版 Edge，生产环境需加
overflow: hidden回退
立即学习“前端免费学习笔记（深入）”；
实际使用中，overflow 的表现高度依赖父容器是否设置了明确宽高、子元素是否脱离文档流、以及是否启用 contain: paint 等优化。最易忽略的是：即使写了 overflow: auto，如果父容器没有设定 height 或 max-height，它依然会无限撑高——溢出控制的前提，永远是盒模型尺寸可控。 
