最常见原因是父容器未形成BFC或子元素脱离文档流；需确保父容器有明确宽高、触发BFC（如display:flow-root），且绝对定位子元素的最近定位祖先即该父容器并设position:relative。
overflow: hidden 为什么没裁掉子元素？
最常见原因是父容器没形成块级格式化上下文（BFC），或者子元素脱离了文档流。比如父容器没设 width 或 height，内容撑多大它就多大，“溢出”根本不存在；又或者子元素用了 position: absolute，它会跳出父容器的包含块，overflow: hidden 对它基本无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
display: flow-root（现代推荐）或display: block，强制触发 BFC - 避免子元素用
float或position: absolute，除非你明确知道它的定位上下文是谁 - 检查父容器是否被 flex/grid 容器包裹——此时
overflow: hidden可能只在交叉轴生效，主轴需额外控制 - 移动端 Safari 中，若父容器同时用了
transform，可能绕过裁剪，可加-webkit-mask-image: linear-gradient(transparent, transparent)补救
flex 子项溢出时 overflow: hidden 不起作用？
flex 布局里，overflow: hidden 默认只裁剪交叉轴（比如 column 方向下溢出），而主轴（如 row 方向右溢出）往往“视而不见”。这不是 bug，是规范行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想让 flex 子项横向不溢出：给父容器设
flex-wrap: nowrap+ 明确width，再加overflow: hidden - 更稳妥的做法是直接在子项上设
overflow: hidden，并配合min-width: 0（防止文本/图片撑开） - 长文本需省略号：子项加
white-space: nowrap+text-overflow: ellipsis+overflow: hidden，三者缺一不可 - 若子项含图片，记得设
max-width: 100%，否则图片原始尺寸可能突破限制
绝对定位子元素怎么让它也被裁剪？
默认情况下，position: absolute 元素只受「最近的定位祖先」约束，而不是离它最近的 overflow: hidden 父容器。如果那个定位祖先不是你设了 overflow: hidden 的元素，裁剪就失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保绝对定位子元素的最近定位祖先（即
position: relative/absolute/fixed/sticky的父级）就是你设了overflow: hidden的容器 - 如果结构无法改，把
overflow: hidden上移到该定位祖先上 - 不要指望靠
z-index让子元素“逃出”裁剪——z-index控制层叠顺序，不影响裁剪边界 - 若子元素还用了
transform（尤其scale或translateZ），iOS Safari 可能漏裁，加will-change: transform反而可能加重问题
图片或文字溢出但 border 没裁到边缘？
裁剪边界永远是父容器的 border box 外缘，也就是你写的 width 和 height 所定义的那圈线。但 box-sizing、padding、border 都会压缩内容可用空间，导致内容提前被切掉，看起来像“裁多了”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设
box-sizing: border-box后，记得把padding和border尺寸从width/height里扣除，否则内容区变小 - 设
box-sizing: content-box（默认）时，padding: 20px+width: 200px= 实际渲染宽 240px，超出部分会被裁，但开发者常误以为是 overflow 问题 - 边框哪怕只有
1px，也会让内容区域缩进 1px，文字紧贴边框时容易被裁掉半个字 - 调试时临时加
outline: 2px solid red，比 border 更直观地看到裁剪边界
