overflow-x 和 overflow-y 是 CSS 中用于控制元素内容溢出的属性，它们分别针对水平方向和垂直方向进行设置。以下是它们的详细说明：1. overflow-x作用： 控制元素 水平方向 的内容溢出行为。可选值（与 overflow 属性类似）：visible：默认值，内容在水平方向溢出时不会被裁剪，会显示在元素外部。hidden：水平方向溢出的内容会被裁剪，不可见。scroll

CSS 中的 overflow-x 和 overflow-y 是精准控制元素内容在水平与垂直方向溢出行为的关键属性，它们支持 visible、hidden、scroll、auto 四种取值，可独立设置以实现如“横向隐藏+纵向自动滚动”等精细化布局效果，广泛应用于宽表格、长文本容器、固定高度侧边栏和弹窗等场景；合理运用不仅能避免内容错乱或遮挡，还能显著提升界面整洁度与跨设备用户体验，是现代网页布局中不可或缺的实用技巧。

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 能有效提升页面的可用性和视觉整洁度。

终于介绍完啦！小伙伴们，这篇关于《overflow-x 和 overflow-y 是 CSS 中用于控制元素内容溢出的属性，它们分别针对水平方向和垂直方向进行设置。以下是它们的详细说明：1. overflow-x作用： 控制元素 水平方向 的内容溢出行为。可选值（与 overflow 属性类似）：visible：默认值，内容在水平方向溢出时不会被裁剪，会显示在元素外部。hidden：水平方向溢出的内容会被裁剪，不可见。scroll：水平方向溢出时显示滚动条，允许用户滚动查看内容。auto：根据需要自动决定是否显示滚动条（如果内容溢出则显示，否则不显示）。示例：div { overflow-x: hidden; /* 水平方向内容溢出时隐藏 */ }2. overflow-y作用： 控制元素 垂直方向 的内容溢出行为。可选值（同样与 overflow 类似）：visible：默认值，内容在垂直方向溢出时不会被裁剪，会显示在元素外部。hidden：垂直方向溢出的内容会被裁剪，不可见。scroll：垂直方向溢出时显示滚动条，允许用户滚动查看内容。》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！