overflow设了没效果的最常见原因是容器未设置height、max-height或width，导致浏览器无法判断是否溢出；它只对有明确尺寸限制的块级元素生效。
overflow 为什么设了却没效果？
最常见的情况是：容器没设 height、max-height 或 width，导致浏览器根本判断不出“是否溢出”。overflow 只对有明确尺寸限制的块级元素生效——它不是魔法，而是基于盒模型边界的裁剪指令。
- 父容器用
flex布局时，子项默认不收缩，即使内容超宽，父容器也不会触发overflow: auto；需给子项加min-width: 0或overflow: hidden才能激活收缩逻辑 - 浮动子元素会让父容器塌陷，
overflow: hidden会失效；可改用display: flow-root创建 BFC -
position: absolute子元素不受父容器overflow约束，除非父容器本身是它的包含块（即父容器设置了position: relative）
overflow-x 和 overflow-y 组合时的隐式陷阱
单独写 overflow-x: hidden 不等于 overflow: hidden，它不会重置 overflow-y 的值——后者会回退到默认的 visible，造成垂直方向意外溢出。
- 永远成对声明：
overflow-x: auto; overflow-y: hidden;，而不是只写一个 -
overflow: scroll会同时启用横向和纵向滚动条，哪怕只有一维溢出；想只滚一个方向，必须用x/y分开控制 - 在 iOS Safari 中，
overflow-y: auto容器可能无法手指拖拽滚动；需确保祖先节点没用transform、will-change或opacity，否则会禁用原生滚动
文字类溢出怎么优雅截断？
单纯用 overflow: hidden 处理文本，只会生硬裁剪，用户看不到关键信息。要实现“单行省略”，必须三者配合：
.ellipsis-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-
white-space: nowrap阻止换行，让文本变成一行长串 -
overflow: hidden裁剪超出部分 -
text-overflow: ellipsis在末尾显示省略号（仅对inline或inline-block元素有效） - 若用于多行文本，不能靠
text-overflow，得用display: -webkit-box+-webkit-line-clamp，但兼容性有限
移动端滚动体验差？别只怪 overflow
在 iOS 上，overflow: auto 容器常出现“点不动、拖不走、滚动卡顿”现象，根源往往不在 overflow 本身，而在渲染层干扰。
立即学习“前端免费学习笔记（深入）”；
- 旧版 iOS 必须加
-webkit-overflow-scrolling: touch才能启用弹性滚动（现代 Safari 已默认支持，但部分混合应用 WebView 仍需保留） - 容器高度不能依赖
min-height或内容撑开，必须是确定值（如height: 200px或flex: 1且父级有高度） - 避免嵌套滚动：比如弹窗内
overflow-y: auto+ 页面本身可滚动，容易触发“滚动穿透”或手势冲突；可用overscroll-behavior: contain隔离
visible、hidden、auto 这几个值，而是理解它们生效的前提——尺寸约束、格式化上下文、定位上下文、渲染层隔离。漏掉其中一环，overflow 就只是个摆设。 
