display: flow-root 是解决浮动塌陷的最优解，一行代码触发 bfc，兼容现代浏览器且无裁剪副作用；clear: both 加在父容器上无效；伪元素 clearfix 需 content: ""、display: table、clear: both 缺一不可。
不是所有浮动问题都和 BFC 有关，但当你看到父容器高度塌陷、文字绕着浮动元素跑、或相邻 margin 突然“变小”时，大概率是 BFC 缺失导致的。关键不在于“是不是 BFC 引起”，而在于“当前布局是否需要 BFC 来隔离”。
怎么快速确认父容器没形成 BFC？
打开开发者工具，选中疑似出问题的父元素（比如一个 div 包着几个 float: left 的子项），在 Styles 面板里检查它是否满足任一 BFC 触发条件：
-
overflow值是visible（默认值）→ 不触发 BFC -
float是none→ 不触发 -
position是static或relative→ 不触发 -
display是block或inline→ 不触发
如果以上全中，那它确实没形成 BFC——此时浮动子元素会脱离文档流，父容器“看不见”它们，高度就塌了。
为什么 overflow: hidden 能“修复”但又不推荐乱用？
overflow: hidden 是最常用的 BFC 触发方式，但它本质是“剪裁溢出内容”，不是专为布局设计的：
- 如果子元素用了
position: absolute或动画移出边界，会被直接截断 - 配合
transform或scroll-behavior时，可能干扰滚动表现 - 语义上毫无关联：你只是想包裹浮动，却被迫加了个“隐藏溢出”的指令
更干净的替代是 display: flow-root——它唯一目的就是创建 BFC，无副作用，现代浏览器（Chrome 64+、Firefox 59+、Safari 15.4+）已全面支持。
哪些现象看似是浮动问题，其实和 BFC 无关？
别把所有视觉异常都归给 BFC。下面这些情况，加 display: flow-root 也救不了：
- 子元素用了
position: absolute→ 它完全脱离文档流，BFC 也“包不住” - 父容器本身被
float或absolute触发了 BFC，但你误以为没触发 → 检查 computed styles 中的display和position - margin 合并发生在两个兄弟
div之间，但你只给其中一个加了 BFC → 必须让“上方那个”或“下方那个”进入 BFC 才能阻断合并
BFC 不是万能胶，它只对“块级流内布局”起作用。一旦元素脱离常规流（absolute、fixed、flex item 在某些模式下），BFC 的包含规则就失效了。
真正该关注的，是“隔离边界”是否被有意打破
BFC 的核心价值不是“清除浮动”，而是建立一个渲染边界。容易被忽略的是：这个边界一旦建立，它内部的 margin 依然会折叠，float 依然会环绕——只是不会穿透到外部。很多人加了 overflow: hidden 发现文字不绕图了，就以为“BFC 解决了浮动”，其实真正起作用的是 BFC 的“边界隔离”规则，而不是浮动本身被消灭了。所以判断问题根源，永远要回到“哪个元素该负责包裹、哪个该负责避让”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
