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，避免内容完全无法访问 - 移动端使用时需考虑手势滑动与滚动条的交互体验
基本上就这些。根据布局需求灵活使用这两个属性，能更精细地控制容器内的内容展示方式。