overflow属性用于控制内容溢出时的显示方式，其取值包括visible（默认，内容可见）、hidden（裁剪不显示）、scroll（始终显示滚动条）、auto（按需显示）；可通过overflow-x和overflow-y分别控制横向或纵向溢出，常用于固定高度容器、模态框等场景，提升布局可控性与用户体验。
当元素内容超出其边界时，CSS 的 overflow 属性用来控制如何处理这些溢出的内容。通过设置不同的值，你可以决定是隐藏内容、显示滚动条，还是让内容正常溢出。
overflow 可用的取值及作用
overflow 属性常见于设置了固定宽高或最大尺寸的块级元素，比如 div、section 等。以下是它的主要取值：
visible：默认值。溢出的内容正常显示在元素外部，不会被裁剪。 hidden：溢出的内容被裁剪，不可见，也不会出现滚动条。 scroll：无论是否溢出，都会显示滚动条（横竖都可能出现），用户可滚动查看内容。 auto：只有当内容真正溢出时才显示滚动条，更智能，推荐日常使用。
控制横向或纵向单独溢出
如果只想控制水平或垂直方向的溢出，可以使用以下两个专用属性：
overflow-x：控制水平方向（左右）的溢出行为。 overflow-y：控制垂直方向（上下）的溢出行为。
例如，只允许垂直滚动：
立即学习“前端免费学习笔记（深入）”；
Python v2.4 中文手册 chm
Python v2.4版chm格式的中文手册，内容丰富全面，不但是一本手册，你完全可以把她作为一本Python的入门教程，教你如何使用Python解释器、流程控制、数据结构、模板、输入和输出、错误和异常、类和标准库详解等方面的知识技巧。同时后附的手册可以方便你的查询。
2 查看详情
div { overflow-y: scroll; overflow-x: hidden;}
实际应用场景示例
常见用途包括：
制作固定高度的文本区域，超出部分可滚动查看（如评论区）。 防止浮动元素或绝对定位元素跑出父容器。 实现模态框或侧边栏内部内容滚动，而不影响页面整体滚动。
示例：创建一个只能纵向滚动的盒子
.scroll-box { width: 300px; height: 200px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ccc;}
基本上就这些。合理使用 overflow 能有效提升页面布局的可控性与用户体验。注意在移动端测试滚动表现，避免嵌套滚动带来的操作困扰。
以上就是css overflow如何控制内容溢出的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1031190.html
微信扫一扫 
支付宝扫一扫 
