overflow:hidden 的作用远不止“把超出部分藏起来”这一件事：只要 overflow 的计算值不是 visible，浏览器就会同时做三件事——**裁剪超出 padding box 的内容、把元素变成滚动容器、建立 BFC（块级格式化上下文）**。后两个副作用才是各种布局技巧和线上问题的真正来源。
overflow:hidden 到底做了什么
结论：overflow:hidden 一次性触发了三种机制——裁剪、滚动容器、BFC，且三者不可分开关闭。
- 裁剪：超出元素 padding box 的后代内容不绘制，但该元素自身的
border、box-shadow 不受影响；被父级 overflow:hidden 包住时，子元素的阴影同样会被裁掉。
- 滚动容器：元素虽然看不到滚动条，却仍然是一个可滚动容器。给它设
el.scrollTop = 200 会真的滚动，scrollIntoView()、锚点跳转、输入框聚焦也会让它内部滚动——这是“页面滚不动了”类问题的高频原因。
- BFC：
hidden、auto、scroll 都满足创建 BFC 的条件，因此能包含内部浮动、阻止父子 margin 合并。
如果只想裁剪、不要滚动容器和 BFC，用 overflow: clip（Chrome 90+、Firefox 81+ 支持），它是新版浏览器里更干净的替代品。
为什么加了 overflow:hidden 就能清除浮动、解决 margin 塌陷
结论：这不是两个独立特性，而是同一个 BFC 特性带来的两个结果。
- 清除浮动：父元素形成 BFC 后，计算高度时必须包裹内部浮动子元素，父元素高度不再塌陷。这是
clearfix 之外最省事的方案，代价是父元素变成 BFC，内部布局规则随之改变。
- margin 塌陷：父子元素的上下 margin 在普通流里会合并并“穿透”到父元素外部。父元素成为 BFC 后，子元素 margin 被限制在内部，父元素整体被推开。等价写法还有
padding:1px、border-top:1px solid transparent、display:flow-root——其中 display:flow-root 只建 BFC、不建滚动容器，是语义最准确的方案。
overflow:hidden 和 overflow:auto / scroll 有什么区别
结论：三者在裁剪和 BFC 上完全一致，差别只在滚动条的显示策略和由此引发的布局变化。
scroll 恒定预留滚动条空间，内容没溢出时也会显示灰条；auto 按需显示；hidden 允许滚动但不提供滚动条入口。所以 hidden 常被用来做“可编程滚动容器”——例如横向轮播图、拖拽排序列表，用 JS 改 scrollLeft 或 transform 控制位移，界面上不出现滚动条。但要注意：overflow:hidden 元素内部一旦有可聚焦元素，键盘 Tab 导航会把它滚动到视线内，视觉上表现为内容“莫名移位”。
为什么父元素加了 overflow:hidden，position:sticky 就失效了
结论：因为 overflow:hidden 的祖先成了 sticky 元素的滚动容器，sticky 的吸附参照系从视口变成了这个不滚动的容器。
position:sticky 的吸附逻辑是“相对于最近的滚动祖先滚动，并在其边界内吸附”。父级一旦是滚动容器（hidden/auto/scroll 均算），而它自身没有实际滚动，sticky 就失去了可参考的滚动位移，表现为完全不动。排查顺序：从 sticky 元素向上逐层检查祖先的 overflow，把它改成 visible，或把 overflow:hidden 挪到不包含该 sticky 元素的层级。同理，overflow 与 transform、filter 组合时，还会改变 fixed 元素的包含块，让 position:fixed 变成“相对于该元素定位”。
overflow:hidden 怎么实现单行和多行文本省略号
结论：单行省略必须三个属性齐备，多行省略必须带 overflow:hidden，缺一个都不生效。
单行文本：
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
多行文本（WebKit 方案，Chrome / Safari / 新版 Firefox 均可用）：
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意 -webkit-line-clamp 在 display:flex 或 display:block 下无效，必须配 -webkit-box；同时它要求 overflow:hidden，否则行数被截断但视觉上不裁剪。
哪些场景下 overflow:hidden 会帮倒忙
结论：它是个“副作用很大”的属性，以下几个坑在真实项目里出现频率最高。
- table 直接设
overflow:hidden 无效，必须外套一个 div 容器才能裁剪或滚动。
- flex 子项被撑破：flex 子项的自动最小尺寸（
min-width:auto）只在 overflow:visible 时生效，加上 overflow:hidden 后最小尺寸变为 0，长单词或长数字会把内容压扁。这是好处也是隐患，需要时明确写 min-width:0。
- 下拉菜单被裁掉：给
body 或页面大容器加 overflow:hidden 锁滚动后，position:absolute 的弹出层会被一起裁掉，正确做法是给 html 加，或用 overflow:clip 配合 overflow-clip-margin。
- 圆角失效：
overflow:hidden 配合 border-radius 才能裁掉子元素直角，单独给容器写圆角而不加 overflow:hidden，子元素背景色仍会溢出到圆角之外。
一句话收束：overflow:hidden 的价值在于“裁剪 + 滚动容器 + BFC”三位一体，用它之前先想清楚自己需要的是哪一个——只想要裁剪就用 overflow:clip，只想要 BFC 就用 display:flow-root，需要真滚动就用 auto，这样能避开绝大多数布局类问题。
