overflow-x和overflow-y分别控制元素内容在水平和垂直方向的溢出显示方式。1. overflow-x处理左右溢出，取值有visible（默认，显示溢出）、hidden（隐藏溢出）、scroll（强制显示滚动条）、auto（溢出时显示滚动条）；常用于宽表格或长文本容器。2. overflow-y控制上下溢出，取值同overflow-x；适用于固定高度的侧边栏或弹窗，auto最常用以实现按需滚动。3. 两者可独立设置，也可与overflow组合使用；若同时定义，具体方向属性会覆盖overflow的对应行为。例如overflow: scroll会同时启用双轴滚动，而overflow-x: hidden配合overflow-y: auto可实现横向不滚动、纵向滚动效果。4. 实际应用中需注意浏览器兼容性，某些设备或浏览器对混合设置表现不一致，建议多端测试。合理使用这两个属性能提升页面布局的整洁性与用户体验。
overflow-x 和 overflow-y 是 CSS 中用来控制元素在水平或垂直方向上溢出内容的显示方式。它们分别针对不同方向的溢出行为进行设置，帮助开发者更好地管理容器内的滚动和裁剪。
overflow-x：控制水平方向溢出
这个属性决定当内容在水平方向（从左到右）超出容器宽度时如何处理。
常见取值包括：- visible：内容不会被裁剪，溢出部分正常显示（默认值）
- hidden：超出部分被隐藏，不显示也不可滚动
- scroll：无论是否溢出，都会显示水平滚动条
- auto：只有当内容真正溢出时才显示滚动条
例如，一个 div 内有一行很长的文本或宽表格，使用 overflow-x: auto 可让用户左右滑动查看完整内容。
overflow-y：控制垂直方向溢出
该属性用于设置当内容在垂直方向（从上到下）超出容器高度时的表现方式。
立即学习“前端免费学习笔记（深入）”；
- visible：内容向下延伸，不影响布局（可能遮盖其他元素）
- hidden：超出部分被裁掉，无法看到或访问
- scroll：强制显示垂直滚动条，即使内容没溢出
- auto：仅在内容超出时出现滚动条，最常用
比如固定高度的侧边栏或弹窗中，用 overflow-y: auto 能确保长内容可通过滚动查看。
实际应用中的注意事项
这两个属性可以单独设置，也可以和 overflow 一起使用。如果同时设置了 overflow 和其中一个方向属性，可能会有覆盖关系。
- 当只写
overflow: scroll，会同时作用于 x 和 y 方向 - 若分别设置
overflow-x: hidden和overflow-y: auto，则能实现横向不滚动、纵向滚动的效果 - 某些浏览器对组合使用较敏感，建议测试不同设备下的表现
基本上就这些。合理使用 overflow-x 和 overflow-y 能有效提升页面的可用性和视觉整洁度。
