overflow-x: hidden 失效主因是父容器无宽度限制或子元素撑开布局，需设 width/max-width 并注意 white-space、position、flex-shrink 等影响；它仅裁剪横向溢出，兼容性优于 clip-path。
overflow-x: hidden 为什么有时不生效
直接加 overflow-x: hidden 却挡不住横向滚动，大概率是父容器没设宽度约束或内部元素“撑开”了布局。CSS 的 overflow 系列属性只对「有渲染尺寸限制」的块级容器起作用，如果父元素 width 是 auto（比如默认的 div），浏览器会优先让内容把盒子撑宽，overflow-x: hidden 就被绕过去了。
常见错误现象：overflow-x: hidden 加了但依然能左右拖动、滚动条没消失、文字或图片跑出视区边界。
- 必须给父容器明确设置
width或max-width，不能依赖 content-fit - 检查是否用了
white-space: nowrap配合长文本——它会让单行不换行，极易触发溢出，此时overflow-x: hidden才真正需要 - 避免子元素用
position: absolute脱离文档流后超出父盒范围，这种溢出不受overflow-x控制 - Flex 容器中，若子项没设
flex-shrink: 1，默认不收缩，也会顶破父容器
和 overflow: hidden 的区别在哪
overflow-x: hidden 只管水平方向，垂直方向照常滚动；而 overflow: hidden 是“双杀”，两个方向都裁剪。别为了隐藏横向溢出就盲目上 overflow: hidden，否则可能意外锁死页面纵向滚动（比如在手机端或长表单里）。
使用场景：轮播图容器、标签栏、固定宽度的卡片列表、日历周视图——这些只要横着藏，竖着还得动。
立即学习“前端免费学习笔记（深入）”；
-
overflow-x: hidden允许overflow-y: auto共存，实现“横向隐藏 + 纵向可滚” - 某些浏览器（如旧版 Safari）对
overflow-x单独设置的支持不稳定，建议搭配overflow-y: visible显式声明 - 在
body或html上设overflow-x: hidden会影响整页，慎用；更安全的做法是包一层 wrapper
移动端适配时容易漏掉的坑
手机浏览器里，overflow-x: hidden 对「由缩放、双击放大、viewport 缩放」引发的横向溢出无效——它只裁剪内容，不干预视口行为。
典型表现：页面正常时隐藏良好，但用户双击放大后出现横向滚动条，或者 viewport 设置不当导致 body 宽度超过屏幕。
- 务必检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否存在且正确 - 避免给
body或根容器设固定width（如width: 100vw），它在 zoom 下会失真 - 图片没设
max-width: 100%、表格没加table-layout: fixed，都是移动端横向溢出高频原因 - iOS Safari 中，
input聚焦时键盘弹出会临时放大页面，触发溢出；可监听focusin临时加body { overflow-x: hidden }，blur 后恢复
替代方案：clip-path 能不能用
clip-path 可以视觉上“切掉”区域，但它只是遮罩，被裁剪的内容仍参与布局、仍可被聚焦、仍会响应鼠标事件——和 overflow-x: hidden 的语义完全不同。
如果你只是想让某段文字不露头，又希望它保持可访问性（比如 screen reader 能读），clip-path 比 overflow 更灵活；但要做真正的“不可见+不可交互”，还是得靠 overflow-x: hidden 配合尺寸控制。
-
clip-path: inset(0 100% 0 0)看似能隐藏右侧，但实际是把整个元素右半边“挖空”，不是溢出裁剪 -
clip-path不触发滚动条，也不影响子元素的position: sticky行为，这点和overflow有本质差异 - 兼容性上，
clip-path在 IE 完全不支持，Android 4.x 也基本不可用；overflow-x则从 IE8 就稳定支持
