父元素未触发bfc导致overflow:hidden失效，根本原因是其自身已脱离文档流（如设float、absolute或inline-block）；应改用display:flow-root（现代浏览器）或overflow:auto（兼容旧环境），并检查computed style确认最终生效值。
父元素没触发BFC，overflow: hidden 为什么也不管用？
常见现象是加了 overflow: hidden 还是塌陷，根本原因是父元素本身被设了 float、position: absolute 或 display: inline-block 等——这些会让它脱离常规文档流，导致 BFC 触发逻辑失效。
触发 BFC 的前提是元素得是个「正常参与布局的块级容器」。如果父元素自己已经浮动或绝对定位，那它就不再具备包裹子浮动的能力。
- 检查父元素是否带
float: left或float: right，有就得去掉 - 确认没有
position: absolute/fixed，否则换用position: relative+overflow: hidden -
display: inline-block同样不构成独立 BFC 容器，换成display: block或display: flow-root
display: flow-root 是最干净的解法，但兼容性要注意
display: flow-root 是专为解决这个问题设计的，它强制创建一个 BFC 容器，且不影响布局行为（不像 overflow: hidden 可能意外裁剪内容）。
但它在 IE 和部分老版 Android WebView 中完全不支持。如果你的项目还要兼容 IE11，就别用它。
- 现代项目（Chrome 64+、Firefox 58+、Safari 11.1+）可直接上
display: flow-root - 需要兼容旧环境时，优先选
overflow: auto（比hidden更安全，不强制隐藏溢出） - 避免用
zoom: 1（IE hack），它在标准模式下无效，且现代浏览器已弃用
清除浮动不是目的，防止高度塌陷才是关键
很多人以为「清除浮动」就是要调用 clear: both，其实那是针对兄弟元素避让浮动的场景；而父容器塌陷，本质是内部浮动元素脱离文档流后，父元素无法计算高度。
所以重点不是「清」，而是「包住」——让父容器形成一个隔离上下文，把浮动子元素关在里面。
-
clear: both加在父元素末尾的伪元素上（如::after）只是模拟撑开效果，本质还是靠 BFC - 纯 CSS 清除方案（如
clearfix类）底层依赖的仍是display: table或overflow触发 BFC - Flex 或 Grid 布局下天然不塌陷，因为子项默认不脱离文档流，此时加浮动反而会破坏布局
调试时先看 computed style 里的 display 和 overflow
浏览器开发者工具里，「Computed」面板中搜 display，确认最终值是不是 flow-root、block 或 table；再搜 overflow，看有没有被层叠覆盖成 visible。
经常踩的坑是：某个重置样式表（比如 normalize.css）或 UI 框架（如 Ant Design）悄悄把 overflow 设回 visible，导致你写的 hidden 白写了。
- 用「Computed」面板比「Styles」面板更可靠，它显示最终生效值
- 检查是否有
!important覆盖了你的overflow设置 - 父元素若用了 CSS Custom Property 动态控制
overflow，记得看实际计算值
BFC 不是开关，是渲染引擎对容器的一组行为约定。真正卡住人的，往往是父元素自己已经不在文档流里了，还指望它去包别人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
