overflow四个常用值直接决定内容可见性、滚动条显示及父容器高度：visible（默认，不裁剪不加滚动条，易致布局失控）、hidden（裁剪且无滚动条）、scroll（始终显示滚动条）、auto（仅溢出时显示滚动条）。
overflow 的四个常用取值不是“随便选”，而是直接决定内容是否可见、滚动条是否出现、父容器是否塌陷——选错一个，布局就可能错位或交互失灵。
visible 是默认值，但容易让布局失控
元素超出宽高时，内容照常渲染在容器外，不裁剪也不加滚动条。看似“最自由”，实则风险最高：
- 浮动子元素（
float: left）撑不开父容器，导致后续元素上移（即“父容器塌陷”） - 绝对定位元素可能溢出到无关区域，遮挡其他内容
- 在
table-layout: fixed的td中设为visible，文字会横向挤进相邻单元格（取决于direction）
hidden 会裁剪内容，且不提供滚动能力
超出部分被静默截断，用户完全无法访问。它常被误用于“隐藏多余文字”，但要注意：
- 对
textarea设overflow: hidden会强制隐藏原生滚动条（哪怕内容已溢出） - 配合
text-overflow: ellipsis使用时，必须同时满足：块级、white-space: nowrap、width有定值 - 不会影响父容器高度计算——即使子元素实际内容很高，父容器仍按“视觉可见部分”算高
scroll 总是显示滚动条，不管有没有溢出
无论内容是否超出，垂直/水平方向都会强制渲染滚动条（哪怕只是占位）。典型使用场景：
- 需要统一 UI 风格的表单区域（如固定尺寸的配置面板）
- 避免
auto切换时引起的布局抖动（滚动条出现/消失导致宽度变化） - 注意：在 macOS 上，原生滚动条默认是“悬浮式”，
scroll可能不明显；可加overflow-y: scroll单独控制垂直方向
auto 是最常用的，但行为依赖浏览器和上下文
只在内容真正溢出时才显示滚动条，看起来最智能，但有几个关键细节：
-
body和textarea的默认值就是auto，不是visible - 如果只设
overflow-x: hidden，未声明overflow-y，那么overflow-y会回退到visible（不是继承auto） - 在 flex 或 grid 容器中，
auto可能因主轴/交叉轴尺寸限制表现异常——建议显式设置overflow-y: auto或overflow-x: auto
真正难处理的从来不是“怎么写”，而是“什么时候该用哪个值 + 它在特定上下文里到底干了什么”。比如 overflow: auto 在 position: absolute 元素里可能失效，或在 transform 包裹下触发新的层叠上下文，间接影响裁剪边界——这些都得靠 devtools 的“Layout Shift Regions”或“Paint Flashing”去验证，不能只看文档描述。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
