CSS overflow属性控制内容溢出行为：visible默认显示、hidden裁剪、scroll始终显示滚动条、auto按需显示；绝对定位元素需父容器设position: relative以约束范围；flex/grid中需min-width:0等触发收缩；移动端注意-webkit-overflow-scrolling兼容性。
当子元素尺寸超过父容器时，CSS 默认会将其内容溢出显示。是否裁剪、滚动或保持可见，取决于 overflow 属性及其组合定位方式（如 position: absolute）的交互逻辑。
overflow 属性控制溢出行为
父容器的 overflow 决定内容超出边界时的表现：
-
overflow: visible（默认）：内容完全可见，可能覆盖其他元素，不受父容器边界限制 -
overflow: hidden：超出部分被裁剪，不显示滚动条，也不响应鼠标滚轮 -
overflow: scroll：始终显示滚动条（即使内容未溢出），可滚动查看全部内容 -
overflow: auto：仅在内容实际溢出时显示滚动条，更符合用户体验
绝对定位元素常“逃出”父容器
当子元素设为 position: absolute，它将脱离文档流，定位参考点是最近的 已定位祖先（即 position 为 relative、absolute、fixed 或 sticky 的父级）。若父容器未设置定位，绝对定位元素会相对于 <body> 定位，看起来就像“跑出去了”。
- 解决方法：给父容器加
position: relative（最常用且无视觉影响） - 注意：
overflow对绝对定位子元素依然生效——但只裁剪 在父容器盒模型范围内绘制的内容；若top/left值让元素完全移出可视区域，hidden会将其隐藏
flex / grid 布局中的溢出处理
Flex 容器默认不自动收缩子项，容易导致横向溢出：
立即学习“前端免费学习笔记（深入）”；
- 给子项设置
min-width: 0或overflow: hidden，可触发收缩行为 - 对文本类内容，搭配
white-space: nowrap; text-overflow: ellipsis;实现单行省略 - Grid 中类似，需配合
minmax(0, 1fr)或显式设置overflow控制单元格内容
移动端适配与常见陷阱
在 iOS Safari 等环境中，overflow: scroll 或 auto 的容器需额外处理才能支持弹性滚动：
- 添加
-webkit-overflow-scrolling: touch（旧版 iOS 必需，现代浏览器已默认支持） - 避免在
body或html上设overflow: hidden，否则可能禁用整个页面滚动 - 使用
contain: layout paint可提升复杂溢出区域的渲染性能
