overflow 是 CSS 中控制元素内部文字、图片或子元素超出边界后如何显示、裁切或滚动的属性。当段落文字超过卡片高度、图片超出相框，或代码行宽过长时，容器可以让越界部分继续显示、将其裁掉，或提供滚动能力。它常用于固定尺寸的卡片、代码框、图片容器和横向列表。
overflow属性的作用范围
块容器、弹性容器和网格容器都可以使用 overflow 管理内部溢出。属性既可以同时设置水平方向和垂直方向，也可以拆分为 overflow-x 与 overflow-y 分别控制。它处理的是容器边界内的溢出，不会自动缩小子元素，也不能代替文字换行、图片适配等布局规则。
如果容器没有明确的宽度或高度限制，文字、图片等可能会把容器撑开，因而看不出溢出效果。比如，想限制一段说明文字的高度并允许纵向滚动，就需要让容器形成可计算的高度边界；想限制横向代码行，则要确保容器宽度受到约束。
常见取值及显示效果
| 取值 | 显示与滚动效果 | 常见用途 |
|---|---|---|
visible | 默认值。溢出的文字或图片仍显示在容器边界之外，不裁切，也不因该值提供滚动机制。 | 允许图标、装饰或文字自然延伸的普通布局。 |
hidden | 超出部分被裁切，通常不显示滚动条；容器仍可通过脚本等方式滚动。 | 裁切卡片装饰图形，或制作滑动区域的裁切窗口。 |
clip | 超出部分被裁切，不提供滚动机制；与 hidden 不同，它不允许通过滚动把被裁掉的文字或图像移入可视区域。 | 只需硬性裁切、明确不需要滚动的装饰元素。 |
scroll | 建立滚动机制，即使当前没有溢出也按该模式处理。滚动条是否始终可见，还受操作系统和浏览器界面影响。 | 希望日志框或代码框始终采用滚动交互的场景。 |
auto | 文字或图片溢出时提供滚动能力；未溢出时通常不出现滚动条。 | 长度不固定的评论列表、日志框和代码区域。 |
例如，使用 overflow: hidden 裁切圆角卡片中的图片时，超出卡片边缘的部分不会显示；改为 overflow: auto，超出边界的文字或图像则可以在容器内滚动查看。对于需要用户读完的说明或日志，单纯使用 hidden 可能让后续文字不易被发现，应根据交互需求选择取值。
同时控制水平与垂直方向
单独设置 overflow 时，一个值会同时用于两个方向；写两个值时，第一个对应水平方向，第二个对应垂直方向。拆分属性则可以让横向代码行滚动、纵向区域保持裁切，或反过来处理。
overflow: auto; 表示两个方向都按需处理溢出。overflow: hidden auto; 表示水平方向裁切、垂直方向按需滚动。下面的写法适合宽表格或长代码行：
.code-box { width: 100%; overflow-x: auto; overflow-y: hidden; }
需要留意，两个方向的取值会相互影响：当一个方向设为既非 visible 也非 clip 的值时，另一个方向的 visible 会按计算规则变为 auto；与之类似，另一个方向的 clip 会变为 hidden。因此，浏览器实际采用的效果有时与单看某一条声明不完全相同。
常见布局中的使用方式
卡片图片裁切通常是把图片放进有明确边界的容器，再用 overflow: hidden 隐藏越界部分。若卡片还需要圆角，裁切可以让图片沿容器边缘显示。需要注意，overflow 只负责边界外的显示方式；图片本身的缩放与裁切位置仍由尺寸规则和 object-fit 等属性决定。
.card { border-radius: 12px; overflow: hidden; }
.card img { display: block; width: 100%; }
代码框或长日志更适合使用 overflow: auto。代码较短时通常不必展示滚动条，行数或单行长度增加后，读者仍可在框内查看，不会无限撑宽周围布局。导航标签、时间轴等横向排列的项目则常使用 overflow-x: auto，让较窄屏幕上的用户横向浏览。
在弹性布局和网格布局中，子项的最小尺寸有时会阻止容器按预期收缩，表现为长文字或代码把整行撑宽。这类问题不一定仅靠给父级设置 overflow 就能解决；可以检查子项的宽度约束，并在适当位置设置 min-width: 0，再由真正负责滚动的容器处理溢出。
overflow与文本省略
overflow 不会自动在文字末尾添加省略号。单行文本通常需要配合固定宽度、white-space: nowrap 和 text-overflow: ellipsis，才能在空间不足时显示省略标记。例如：
.title { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
这里，overflow: hidden 负责裁切越界文字，text-overflow 负责决定裁切处的提示方式，white-space 则让文字保持在一行内。缺少其中的条件时，省略效果可能不会出现。多行文本省略涉及不同的排版处理，不能把单行写法直接当作通用方案。
选择overflow值时的关键区别
hidden 与 clip 都会让超出边界的文字或图片不可见，但前者仍保留滚动容器能力，后者则不提供滚动。auto 面向按需滚动，scroll 则明确采用滚动机制；不同设备可能使用常驻滚动条或覆盖式滚动条，因此视觉表现并不完全一致。visible 适合文字和图像自然延展的场景，却不适合需要严格限制边界的容器。
此外，取值为 hidden、auto 或 scroll 时，元素通常会建立新的块格式化上下文；clip 不会因裁切本身建立该上下文。若需要独立的块格式化上下文而又不想采用滚动式溢出处理，可考虑 display: flow-root。理解裁切、滚动和布局上下文之间的差异，才能让 overflow 兼顾视觉效果与文字可访问性。
