overflow属性控制内容溢出行为，hidden隐藏溢出内容且无滚动条，适合清除浮动和防止溢出；scroll始终显示滚动条，确保内容可访问但影响美观；auto按需显示滚动条，推荐用于不确定内容长度的场景；可通过overflow-x和overflow-y单独控制方向，合理选择可提升布局效果与用户体验。
当容器内的内容超出其设定的宽度或高度时，CSS提供了几种方式来控制溢出行为。其中overflow属性是关键，常用取值包括visible、hidden、scroll和auto。下面详细解析它们的作用与使用场景。
overflow: hidden — 隐藏溢出内容
将溢出容器边界的内容裁剪掉，用户无法看到或访问被隐藏的部分。
- 适合用于清除浮动（通过创建BFC）
- 防止文本或图片溢出盒子
- 不会出现滚动条，即使内容明显超出
overflow: hidden后多余文字不可见。
overflow: scroll — 始终显示滚动条
无论内容是否溢出，都会显示横向和/或纵向滚动条。
- 确保用户能访问所有内容
- 即使内容未溢出也会显示滚动条，可能影响美观
- 在桌面端常见，在移动端可能体验不佳
overflow: auto — 按需显示滚动条
仅在内容实际溢出时才显示对应的滚动条，更智能且节省空间。
立即学习“前端免费学习笔记（深入）”；
- 推荐用于不确定内容长度的容器
- 避免不必要的滚动条干扰视觉
- 常用于模态框、侧边栏、表格容器等场景
实际应用建议
选择合适的overflow值应根据具体布局需求判断：
- 需要隐藏多余内容或清除浮动 → 使用
hidden - 必须保证可滚动，不介意滚动条常驻 → 使用
scroll - 希望界面整洁且按需滚动 → 使用
auto - 可单独控制方向：
overflow-x和overflow-y
基本上就这些。掌握overflow的不同表现，能有效解决布局中的溢出问题，提升用户体验。
