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 保持纵向可滚动。常见陷阱：
