overflow-x和overflow-y分别控制元素内容在水平和垂直方向的溢出行为，取值均为visible、hidden、scroll、auto；overflow-x处理宽度溢出，适用于横向滚动场景如宽表格，overflow-y控制高度溢出，常用于固定高度区域如侧边栏；可同时设置两者以独立控制双轴滚动行为，未显式设置的方向默认为visible，组合使用时需注意浏览器兼容性及移动端交互体验。
在CSS盒模型中，overflow-x 和 overflow-y 用于分别控制元素内容在水平和垂直方向上的溢出行为。虽然它们都属于 overflow 属性的细分控制，但作用方向和使用场景不同。
overflow-x：控制水平方向溢出
这个属性决定当内容超出元素容器的宽度时如何处理。
常见取值：- visible：内容不会被裁剪，溢出部分正常显示（默认）
- hidden：超出宽度的内容被隐藏
- scroll：始终显示水平滚动条，无论是否溢出
- auto：仅在内容溢出时显示滚动条
表格宽度固定，但列数较多，希望用户可以横向滚动查看全部列：
table {
width: 300px;
overflow-x: auto;
}
overflow-y：控制垂直方向溢出
该属性控制内容超出元素容器高度时的表现方式。
立即学习“前端免费学习笔记（深入）”；
取值与 overflow-x 相同：
- visible：不裁剪，内容向下延伸
- hidden：超出高度的内容不可见
- scroll：强制显示垂直滚动条
- auto：需要时才出现滚动条
固定高度的侧边栏，内容较长时允许单独滚动：
.sidebar {
height: 400px;
overflow-y: auto;
}
组合使用注意事项
可以同时设置两个属性，实现独立控制两个方向的溢出行为。
例如：.container {
width: 200px;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
这时即使垂直方向内容溢出也不会出现滚动条，而水平方向始终有滚动条。
注意点：- 如果只设置其中一个，另一个默认为
visible - 在某些浏览器中，
overflow-x和overflow-y都设为visible但实际会退化为auto，避免内容完全无法访问 - 移动端使用时需考虑手势滑动与滚动条的交互体验
