在网页开发的实际场景中，我们经常会给容器设置固定的宽高尺寸，当容器内部的内容总尺寸超过容器的预设尺寸时，就会出现内容溢出容器的情况，比如一段长文本放在固定高度的div中，或者一张大尺寸图片放在固定宽度的卡片里，这时候溢出的内容会超出容器的范围显示，打乱页面的整体布局结构。
overflow属性的基本作用
CSS的overflow属性就是用来控制当内容溢出元素框时，内容该如何显示的规则，它可以应用在块级容器元素上，通过不同的取值实现不同的溢出处理效果，避免溢出内容破坏页面布局。
overflow属性的常用取值
overflow属性有多个常用取值，每个取值对应不同的溢出处理逻辑，具体如下表所示：
| 取值 | 效果说明 | 适用场景 |
|---|---|---|
| visible | 默认值，溢出内容不会被裁剪，会直接显示在容器外部 | 不需要处理溢出，允许内容超出容器的场景 |
| hidden | 溢出内容会被裁剪，超出容器的部分直接隐藏，用户无法看到 | 只需要展示容器内部分内容，不需要显示溢出内容的场景 |
| scroll | 容器会始终显示水平和垂直滚动条，用户可以通过滚动条查看溢出内容 | 需要用户查看全部溢出内容，且希望滚动条始终存在的场景 |
| auto | 只有当内容溢出时才会显示对应的滚动条，内容未溢出时不显示滚动条 | 希望按需显示滚动条，避免多余滚动条占用空间的场景 |
单独控制水平和垂直方向溢出
除了直接使用overflow属性同时控制水平和垂直方向的溢出，还可以使用overflow-x和overflow-y分别控制水平方向和垂直方向的溢出行为，两个属性的取值和overflow一致。
比如我们只需要垂直方向出现滚动条，水平方向隐藏溢出内容，就可以这样设置：
/* 水平方向溢出隐藏，垂直方向溢出时显示滚动条 */
.container {
width: 300px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #ccc;
}
实际使用示例
示例1：固定高度文本容器溢出处理
我们创建一个固定高度的文本容器，放入超过容器高度的长文本，分别测试不同overflow取值的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow属性示例</title>
<style>
.text-box {
width: 300px;
height: 150px;
border: 1px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.visible-box {
overflow: visible;
}
.hidden-box {
overflow: hidden;
}
.scroll-box {
overflow: scroll;
}
.auto-box {
overflow: auto;
}
</style>
</head>
<body>
<h3>overflow: visible（默认）</h3>
<div class="text-box visible-box">
这是一段很长的测试文本，用来演示内容溢出容器的效果。当文本的内容高度超过容器的固定高度时，超出的部分会显示在容器的外部，不会进行裁剪，也不会出现滚动条，这样很容易破坏页面的整体布局结构，影响用户的正常阅读体验。
</div>
<h3>overflow: hidden</h3>
<div class="text-box hidden-box">
这是一段很长的测试文本，用来演示内容溢出容器的效果。当文本的内容高度超过容器的固定高度时，超出的部分会被直接裁剪隐藏，用户无法看到超出的内容，适合只需要展示容器内部分内容的场景。
</div>
<h3>overflow: scroll</h3>
<div class="text-box scroll-box">
这是一段很长的测试文本，用来演示内容溢出容器的效果。当文本的内容高度超过容器的固定高度时，容器会显示垂直和水平滚动条，用户可以通过滚动条查看全部内容，即使内容没有水平溢出，水平滚动条也会一直存在。
</div>
<h3>overflow: auto</h3>
<div class="text-box auto-box">
这是一段很长的测试文本，用来演示内容溢出容器的效果。当文本的内容高度超过容器的固定高度时，容器只会在垂直方向显示滚动条，水平方向没有溢出就不会显示水平滚动条，比scroll取值更节省空间。
</div>
</body>
</html>
示例2：图片溢出容器处理
当图片尺寸大于容器尺寸时，也可以使用overflow属性处理，比如我们希望图片超出容器的部分隐藏，只展示容器范围内的图片内容：
/* 图片容器设置固定尺寸，溢出隐藏 */
.img-container {
width: 200px;
height: 200px;
overflow: hidden;
border: 1px solid #666;
}
/* 图片宽度占满容器，高度自适应 */
.img-container img {
width: 100%;
height: auto;
}
注意事项
overflow属性生效的前提是容器元素具有块级格式化上下文，或者设置了固定的宽高尺寸，对于没有设置固定尺寸的容器，内容会自然撑开容器，不会出现溢出情况。- 如果给行内元素设置
overflow属性，默认是不会生效的，需要先将行内元素转换为块级元素或者行内块元素。 - 使用
overflow: hidden的时候，如果容器内部有定位元素，定位元素超出容器的部分也会被隐藏，需要根据实际需求判断是否适用。
通过合理使用overflow属性的不同取值，我们可以灵活处理各种内容溢出的场景，保证页面布局的完整性和用户体验的流畅性，是CSS布局中非常实用的基础属性。
CSSoverflow属性内容溢出容器显示控制修改时间：2026-07-15 18:33:37