overflow-x和overflow-y可分别控制元素水平与垂直方向的溢出行为，通过设置visible、hidden、scroll或auto值实现精准内容显示控制，常用于创建固定预览区域等场景，需注意移动端体验及浏览器兼容性问题。
在CSS中，overflow-x 和 overflow-y 可以分别控制元素在水平和垂直方向上的溢出行为，让你更灵活地处理内容超出容器的情况。
overflow-x：控制水平方向溢出
这个属性决定当内容宽度超过容器宽度时如何处理：
- visible：内容不被裁剪，溢出部分正常显示（默认值）
- hidden：溢出的横向内容被隐藏
- scroll：始终显示横向滚动条，无论是否溢出
- auto：只有当内容真正溢出时才显示滚动条
overflow-y：控制垂直方向溢出
用于设置内容高度超出容器时的表现方式：
- visible：内容向下延伸，不影响布局（可能遮挡其他元素）
- hidden：超出部分被裁剪，无法看到
- scroll：强制显示垂直滚动条
- auto：根据实际内容是否溢出来决定是否出现滚动条
常见使用场景与注意事项
可以组合使用这两个属性来实现精确控制。比如创建一个固定大小的预览区域：
立即学习“前端免费学习笔记（深入）”；
.example {
width: 300px;
height: 200px;
overflow-x: auto; /* 横向自动加滚动条 */
overflow-y: hidden; /* 垂直方向不滚动 */
}
关键点：
- 两个属性可独立设置，互不影响
- 使用 auto 能避免不必要的滚动条出现
- 在移动端要注意滚动条可能影响触控体验
- 某些旧版浏览器对分开控制支持不够好，需测试兼容性
基本上就这些。合理使用 overflow-x 与 overflow-y 能有效提升页面的可用性和视觉整洁度。
