overflow-x和overflow-y分别控制水平与垂直方向的内容溢出行为，通过设置visible、hidden、scroll或auto实现精准滚动控制，如div{width:300px;overflow-x:auto}允许横向滚动，.content-box{height:200px;overflow-y:auto}实现纵向自动滚动，建议同时声明两方向属性以避免浏览器默认兼容问题。
在CSS中，
overflow-x
和
overflow-y
用于分别控制元素在水平和垂直方向上的溢出内容如何显示。这两个属性让你能独立处理横向和纵向的滚动行为，适用于内容超出容器尺寸时的布局管理。
overflow-x：控制水平方向溢出
这个属性决定当内容宽度超过容器宽度时的处理方式。
visible
：内容不裁剪，超出部分正常显示（默认值）
hidden
：超出的内容被隐藏，不出现滚动条
scroll
：始终显示横向滚动条，即使内容没溢出
auto
：仅在内容实际溢出时显示滚动条
例如，想让一个固定宽度的盒子在内容过长时可横向滚动：
div {width: 300px;overflow-x: auto;}
overflow-y：控制垂直方向溢出
该属性控制内容高度超出容器时的行为。
visible
：内容向下延伸，不影响布局（可能遮挡其他元素）
hidden
：隐藏超出部分，无法查看
scroll
：强制显示垂直滚动条
auto
：需要时自动出现滚动条
常见用法是创建一个固定高度、内部可滚动的区域：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
.content-box {height: 200px;overflow-y: auto;}
组合使用场景与注意事项
你可以同时设置两个方向的溢出行为，实现精确控制。
只允许横向滚动：
纵向滚动+横向禁止：
双方向都自动判断：
注意：如果只写
，相当于同时设置 x 和 y 为 auto。但单独设置 x 或 y 时，另一个方向若未声明，
浏览器会按默认规则处理，不一定对称
。比如设了
，某些浏览器会让 y 方向默认变成 hidden，所以建议明确写出两个属性以防兼容问题。
立即学习
“
前端免费学习笔记（深入）
”；
基本上就这些，合理使用 overflow-x 和 overflow-y 能有效解决内容溢出带来的布局问题。
overflow-x: auto; overflow-y: hidden;overflow-y: auto; overflow-x: hidden;overflow-x: auto; overflow-y: auto;overflow: autooverflow-x: scroll