溢出处理属性
最后更新：2026-09-13
overflow 溢出处理属性
overflow 属性控制内容超出容器边界时的处理方式，是处理内容溢出的核心工具。默认值 visible 让溢出内容可见；hidden 裁剪溢出内容；scroll 始终显示滚动条；auto 则在需要时才显示滚动条，是最常用的选择。
| 分类 | |
|---|---|
| 初始值 | visible |
| 继承 | 否 |
| 适用于 | block-container |
| 可动画 | discrete |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
overflow: visible | hidden | clip | scroll | auto;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
visible | hidden | scroll | auto | 关键字 | 内容溢出时的处理方式 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| 所有主流浏览器均支持 | |||||
提示： overflow:hidden 或 auto 会创建新的块级格式化上下文（BFC），可用来清除浮动。
❓ 常见问题
Qoverflow:auto 和 overflow:scroll 有什么区别？
Ascroll 会始终显示滚动条（即使内容没有溢出），且两个方向都预留滚动条空间；auto 只在内容溢出时才显示滚动条，未溢出时完全隐藏，视觉更干净。因此大多数业务场景推荐 auto。注意两者都会把内容限制在盒内，可滚动区域内的元素无法滚出父容器。
Q如何让内容超出时显示滚动条？
A先给容器确定高度（height 或 max-height），再设置 overflow:auto 或 scroll，内容超出容器尺寸即可滚动查看，如 .list { height:300px; overflow:auto; }。整页滚动时不要给 body/html 设置 overflow 限制，否则页面会失去默认滚动。
Qoverflow:hidden 为什么可以清除浮动？
Aoverflow 设为 hidden、auto、scroll 或 clip 时，元素会创建块级格式化上下文（BFC），BFC 内部浮动子元素的高度会被计入父容器，解决高度坍塌。因此给浮动元素父级加 overflow:hidden 是经典清除浮动方式，但注意它也会裁剪溢出的内容。
Qoverflow:hidden 和 overflow:visible 有什么区别？
Avisible（默认值）让溢出容器的内容直接显示在盒子外面，不影响布局但可能覆盖其他元素；hidden 会把超出部分裁剪掉，内容不可见也无法滚动查看。hidden 常用于创建 BFC、配合 border-radius 裁剪圆角内容、隐藏多余装饰等场景。
🏷️ 相关属性
💡 相关案例
📚 相关教程
