overflow:hidden未触发bfc导致父容器塌陷，因其仅对块级、非浮动、非绝对定位元素有效，且受transform/will-change干扰；应改用display:flow-root或::before{content:"";display:table}。
overflow:hidden没触发BFC，父容器仍塌陷
overflow:hidden只在特定条件下才创建BFC：它必须作用于**块级、非浮动、非绝对定位**的元素，且不能被更上层的transform/will-change干扰。安卓 4.4 以下 WebView、Safari 旧版中，若父容器同时设了position: relative和transform: translateZ(0)，overflow:hidden大概率失效，子浮动元素照常塌陷。
检查方式：Chrome DevTools → Elements → 选中该父元素 → Computed → 搜索display和overflow，确认两者值是否符合规范；再看Containing Block是否仍是body。
- 优先改用
display: flow-root，一行解决，无裁剪副作用 - 降级方案用
::before { content: ""; display: table; }，但需确保content: ""没被覆盖 - 别把
overflow: hidden写在float或position: absolute的父容器上——它本身已脱离文档流，BFC触发无效
overflow:hidden裁剪了不该裁的内容
下拉菜单、Tooltip、阴影、SVG图标偏移等，只要超出父容器边界，就会被overflow: hidden直接吞掉。这不是“错乱”，是它本职工作——你让它裁，它就裁。
典型现象：.dropdown-menu只显示半截、box-shadow消失、position: absolute的汉堡按钮在缩放后漂移。
- 逐层关闭祖先元素的
overflow属性，定位到具体哪一层开始裁剪 - 把
overflow: hidden从导航最外层（如.navbar）移到内部内容区（如.nav-content） - 必要时换用
overflow: clip（Chrome 94+/Firefox 97+），它触发BFC但不提供滚动能力，视觉更干净
flex子项加了overflow:hidden却仍撑破容器
90% 是漏写了min-width: 0。Flex子项默认min-width: auto，会锁死最小宽度不小于内容自然宽——此时根本没“溢出”，overflow: hidden连触发条件都不满足。
常见表现：text-overflow: ellipsis不生效、长URL顶破卡片、white-space: nowrap下仍换行。
-
min-width: 0必须加在flex容器的**直接子元素**上，不是父容器，也不是孙子节点 - 必须配合四者共存：
min-width: 0+overflow: hidden+white-space: nowrap+ 明确宽度约束（如width: 200px或flex-basis: 200px） - 若该子元素自身也是
flex容器，其内部要截断的文本还得再加一遍min-width: 0
移动端滚动条消失引发布局跳动
汉堡菜单展开时页面左右晃动，根本不是动画问题，而是body加overflow: hidden后竖向滚动条被移除，视口宽度突增，所有流式元素被“向右推”。
验证方法：DevTools → Elements → 选中body → Computed → 看width值在菜单开关前后是否变化。
- 用
scrollbar-gutter: stable both-edges在html或body上预留滚动条空间，比padding-right补偿更可靠 - 避免只对
body加overflow: hidden却不处理滚动条占位 - 如果必须兼容老浏览器，
padding-right补偿值应取window.innerWidth - document.documentElement.clientWidth，而非固定像素
真正难的不是加一行overflow: hidden，而是搞清它到底在哪个环节参与了渲染决策：是BFC创建失败？是裁剪误伤？是flex收缩被锁死？还是滚动条空间没预留？每个场景的修复点都不同，混用方案只会让问题更隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
