overflow属性用于控制内容溢出时的显示方式，其取值包括visible（默认，内容可见）、hidden（裁剪不显示）、scroll（始终显示滚动条）、auto（按需显示）；可通过overflow-x和overflow-y分别控制横向或纵向溢出，常用于固定高度容器、模态框等场景，提升布局可控性与用户体验。
当元素内容超出其边界时，css 的 overflow 属性用来控制如何处理这些溢出的内容。通过设置不同的值，你可以决定是隐藏内容、显示滚动条，还是让内容正常溢出。
overflow 可用的取值及作用
overflow 属性常见于设置了固定宽高或最大尺寸的块级元素，比如 div、section 等。以下是它的主要取值：
- visible：默认值。溢出的内容正常显示在元素外部，不会被裁剪。
- hidden：溢出的内容被裁剪，不可见，也不会出现滚动条。
- scroll：无论是否溢出，都会显示滚动条（横竖都可能出现），用户可滚动查看内容。
- auto：只有当内容真正溢出时才显示滚动条，更智能，推荐日常使用。
控制横向或纵向单独溢出
如果只想控制水平或垂直方向的溢出，可以使用以下两个专用属性：
- overflow-x：控制水平方向（左右）的溢出行为。
- overflow-y：控制垂直方向（上下）的溢出行为。
例如，只允许垂直滚动：
立即学习“前端免费学习笔记（深入）”；
div { overflow-y: scroll; overflow-x: hidden; }
实际应用场景示例
常见用途包括：
- 制作固定高度的文本区域，超出部分可滚动查看（如评论区）。
- 防止浮动元素或绝对定位元素跑出父容器。
- 实现模态框或侧边栏内部内容滚动，而不影响页面整体滚动。
示例：创建一个只能纵向滚动的盒子
.scroll-box { width: 300px; height: 200px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ccc; }
基本上就这些。合理使用 overflow 能有效提升页面布局的可控性与用户体验。注意在移动端测试滚动表现，避免嵌套滚动带来的操作困扰。