overflow属性控制内容溢出时的显示行为，包括visible、hidden、scroll、auto等值，支持x/y方向独立设置，但hidden优先级高于scroll；溢出内容仍占空间且响应事件；移动端需注意滚动兼容性。
overflow 属性决定内容溢出时的显示行为
当元素内容尺寸超过其容器宽高，overflow 是唯一能直接控制“超出部分怎么处理”的 CSS 属性。它不改变布局流，只作用于渲染层，且对 display: inline 元素无效（需先设为 block 或 inline-block）。
常用值有四个：visible（默认，溢出可见）、hidden（裁剪不显示）、scroll（强制显示滚动条，无论是否溢出）、auto（仅在需要时显示滚动条）。现代浏览器还支持 overlay（macOS 风格滚动条），但兼容性差，不建议线上使用。
overflow-x 和 overflow-y 用于独立控制横纵方向
单设横向或纵向溢出行为时，必须用 overflow-x 或 overflow-y，不能靠 overflow 推导。比如：overflow: hidden 会同时隐藏 x/y 方向溢出；但 overflow-x: hidden; overflow-y: auto 才能实现“横向裁剪、纵向可滚动”。
-
overflow-x: hidden常用于禁止水平滚动（如轮播图容器防拖拽错位） -
overflow-y: scroll有时比auto更稳妥——避免内容动态变化时滚动条出现/消失导致布局抖动 - 若
overflow-x和overflow-y的值组合产生冲突（如hidden+scroll），浏览器按规范优先裁剪（hidden覆盖scroll）
溢出内容不可见 ≠ 不占据空间
overflow: hidden 只是视觉裁剪，被裁掉的内容仍参与盒模型计算和事件响应。例如：一个 width: 200px 的容器内放了 width: 300px 的子元素并设 overflow: hidden，子元素右侧 100px 虽不可见，但鼠标移入该区域仍能触发 :hover 或点击事件。
立即学习“前端免费学习笔记（深入）”；
若要彻底移除溢出部分的影响，需配合其他手段：
- 用
clip-path硬裁（但 IE 不支持，且影响性能） - 用
transform: translateX(-100%)移出视口（需确保父容器overflow: hidden，否则仍可能露边） - 对文本类溢出，优先用
text-overflow: ellipsis（需同时设white-space: nowrap和overflow: hidden）
移动端 touch 滚动需额外注意 -webkit-overflow-scrolling
iOS Safari 旧版本中，overflow: auto 或 scroll 容器默认无惯性滚动，体验生硬。加 -webkit-overflow-scrolling: touch 可启用原生级滚动，但存在已知问题：
- 开启后，容器内 fixed 定位元素可能失效或错位
- Android Chrome 已废弃该属性，加了也无效
- 现代 iOS（14+）已默认启用平滑滚动，该属性逐渐淘汰，新项目应避免依赖
真正需要兼容老 iOS 的场景，建议用 touch-action: pan-y 配合 JS 滚动库（如 smooth-scrollbar），而非强依赖这个私有属性。
溢出控制看着简单，但方向分离、事件穿透、移动端滚动、文本截断这些细节，随便漏掉一个就容易在特定设备或交互下翻车。
