overflow属性用于控制内容溢出时的显示方式，其常用值为visible、hidden、scroll和auto；通过overflow-x和overflow-y可分别控制水平与垂直方向的溢出；常用于文本省略、固定高度区域滚动及防止元素撑破容器，提升页面布局稳定性与用户体验。
当盒模型中的内容超出容器边界时，可以通过 overflow 属性来控制溢出部分的显示方式。这个属性适用于块级容器，能有效管理内容溢出带来的布局问题。
overflow 属性的基本取值
overflow 属性有以下几个常用值，用于定义内容溢出时的处理方式：
- visible：默认值，溢出内容正常显示在容器外部
- hidden：溢出内容被裁剪，不可见
- scroll：无论是否溢出，都会显示滚动条
- auto：仅在内容溢出时显示滚动条
处理水平与垂直溢出
如果只想控制某一方向的溢出，可以使用 overflow-x 和 overflow-y：
- overflow-x：控制水平方向（左右）溢出
- overflow-y：控制垂直方向（上下）溢出
例如，防止横向滚动但允许纵向滚动：
立即学习“前端免费学习笔记（深入）”；
div {overflow-x: hidden;
overflow-y: auto;
}
实际应用场景
常见用途包括：
- 文本过长时隐藏溢出部分，配合 text-overflow: ellipsis 显示省略号
- 固定高度区域（如侧边栏、弹窗）内出现大量内容时添加滚动条
- 防止图片或子元素撑破父容器
示例：让一个固定高度的 div 在内容过多时出现滚动条
.container {height: 200px;
overflow: auto;
} 基本上就这些，合理使用 overflow 能有效提升页面的稳定性和用户体验。
