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：需要时自动出现滚动条
常见用法是创建一个固定高度、内部可滚动的区域：
.content-box {
height: 200px;
overflow-y: auto;
}
组合使用场景与注意事项
你可以同时设置两个方向的溢出行为，实现精确控制。- 只允许横向滚动：
overflow-x: auto; overflow-y: hidden; - 纵向滚动+横向禁止：
overflow-y: auto; overflow-x: hidden; - 双方向都自动判断：
overflow-x: auto; overflow-y: auto;
注意：如果只写 overflow: auto，相当于同时设置 x 和 y 为 auto。但单独设置 x 或 y 时，另一个方向若未声明，浏览器会按默认规则处理，不一定对称。比如设了 overflow-x: scroll，某些浏览器会让 y 方向默认变成 hidden，所以建议明确写出两个属性以防兼容问题。
立即学习“前端免费学习笔记（深入）”；
基本上就这些，合理使用 overflow-x 和 overflow-y 能有效解决内容溢出带来的布局问题。
