box-sizing 默认为 content-box 时，padding 和 border 会额外增加元素总宽高，导致内容区缩小而溢出被 overflow: hidden 裁剪；应全局或局部设为 border-box 并配合 overflow 使用。
box-sizing 不设为 border-box 时 overflow:hidden 会意外裁剪内容
很多人给容器加了 overflow: hidden，却发现文字或图片边缘被切掉了一截——问题往往不在 overflow，而在盒模型默认的 box-sizing: content-box。比如：width: 200px; padding: 16px; 实际内容区只剩 168px，但文本/图片仍按 200px 宽度渲染，一撑就溢出，hidden 立刻生效裁剪。
解决办法很简单：
- 全局重置：在
:root或* { box-sizing: border-box; }开头加上这句 - 局部加固：对关键容器显式写
box-sizing: border-box;，再配overflow: hidden或auto - 别依赖“看起来没溢出”就省略
box-sizing——padding 或 border 一变，溢出立刻重现
overflow-x: hidden 和 overflow-y: auto 组合后横向滚动条仍出现
常见于侧边栏、弹窗或表格容器，明明写了 overflow-x: hidden，却在 Chrome 或 Firefox 里看到一条细长的横向滚动条。这不是 bug，是滚动条本身占宽度导致的连锁溢出：当 overflow-y: auto 触发滚动条时，它会挤占容器内宽，让内容被迫换行或撑出横向溢出，从而激活 overflow-x 的裁剪逻辑（但此时已晚）。
关键应对点：
- 优先用
overflow: auto替代拆分写法，让浏览器统一判断是否需要滚动条 - 若必须拆分，加
padding-right: 16px（滚动条平均宽度）预留空间，或用calc(100% - 16px)控制子元素最大宽度 - Firefox 中该问题更明显，可加
overflow-y: overlay（仅支持少数新版本）或改用scrollbar-gutter: stable预留滚动条槽位
移动端 touch 滚动卡顿或失效，只加 overflow:auto 不够
iOS Safari（尤其 iOS 12–15）对 overflow: auto 容器的 touch 滚动默认不启用硬件加速，表现为滑动粘滞、回弹无力、甚至完全无响应。这不是样式没生效，而是滚动上下文未激活。
必须补上这一行才真正可用：
-
-webkit-overflow-scrolling: touch;—— 只对overflow值为auto或scroll的元素生效 - 它会让容器创建独立合成层，触发原生级滚动体验
- Android Chrome 不需要也不识别这个属性，加了无副作用；现代 iOS（16+）已逐步弃用，但老项目仍得保留
- 注意：如果父容器有
transform或will-change，可能干扰该属性生效，需测试验证
overflow: hidden 触发 BFC 时会意外隐藏绝对定位子元素
overflow: hidden 确实能清除浮动、防止外边距塌陷，但它同时会为元素创建新的块级格式化上下文（BFC），而 BFC 的裁剪边界会严格作用于所有后代元素——包括 position: absolute 的子项。哪怕子元素设置了 left: -20px 向左偏移，也会被直接裁掉，而不是像 visible 那样自然溢出。
遇到这种场景要小心：
- 想让绝对定位元素“逃出”父容器裁剪？把父容器
overflow改成visible，或改用clip-path: inset(0)替代 - 需要 BFC 但又不想裁剪？用
display: flow-root替代overflow: hidden，它触发 BFC 却不改变溢出行为 - 卡片内图片用
overflow: hidden裁圆角很安全，但若卡片内部还要放气泡提示（absolute）、下拉菜单（absolute），就得重新评估
实际开发中最容易被跳过的，是 box-sizing: border-box 和 -webkit-overflow-scrolling: touch 这两个配套动作——它们不直接出现在 overflow 属性值里，却决定了 overflow 是否真正按你预期工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
