最直接确认父容器未触发BFC的线索是子元素margin未撑开父容器或浮动导致高度塌陷；可通过开发者工具检查display、overflow等属性是否满足BFC触发条件。
怎么确认父容器没触发BFC
最直接的线索是：子元素的 margin-top 或 margin-bottom 没撑开父容器，或者浮动子元素导致父容器高度塌陷为 0px。打开开发者工具，选中父容器，在 Computed 面板里搜 display 和 overflow，看是否满足任一 BFC 触发条件——比如 display: flow-root、overflow: hidden、float: left、position: absolute 等。注意：display: flex 或 display: grid 也天然形成 BFC，但会改变子项默认流式行为，不能只看“有没有生效”，要看“是否符合当前布局意图”。
为什么 overflow: hidden 看似生效却出问题
overflow: hidden 是最常被随手加上的 BFC 触发方式，但它有两个隐蔽副作用：
- 意外裁剪内容：比如父容器内有
position: absolute子元素超出边界，或有动画位移、下拉菜单、Tooltip 等临时溢出内容，会被直接截断 - 干扰滚动逻辑：如果后续需要让容器支持滚动（如列表区域），
overflow: hidden会让overflow-y: auto失效，因为属性冲突 - 在部分老版本 Safari 中，
overflow: hidden可能触发非预期的重绘行为，影响动画性能
真正想“仅创建 BFC 而不附带其他效果”，优先用 display: flow-root；它语义明确、无裁剪、不干扰滚动，现代浏览器（Chrome 58+、Firefox 53+、Safari 15.4+）均已稳定支持。
用开发者工具快速验证 BFC 是否生效
Chrome / Firefox 的 Elements 面板里，选中父容器后，在右侧面板的 Layout 标签页下勾选 Show box model，再观察两个关键点：
立即学习“前端免费学习笔记（深入）”；
- 鼠标悬停在
offsetHeight数值上，高亮区域是否包含浮动子元素？如果不包含，说明 BFC 未触发，父容器仍“看不见”浮动子项高度 - 查看
Computed中的contain值：若为layout或paint，说明 BFC 已被显式声明；若为空，且display是block、inline-block等默认值，则大概率未触发 - 在
Styles面板里手动临时添加display: flow-root，看父容器高度是否立刻“回弹”——这是最快验证手段
哪些写法看似合理实则无效
这些常见写法不会触发 BFC，容易误以为“已经处理了”：
-
width: 100%或height: auto：纯尺寸声明，和格式化上下文无关 -
box-sizing: border-box：只改尺寸计算方式，不改变布局上下文 -
margin-collapse: separate：CSS 中根本不存在这个属性，属凭空臆造 -
display: block：块级元素默认就在普通文档流 BFC 中，但该 BFC 不包含浮动子元素，也不阻止 margin 折叠——它只是“最外层默认 BFC”，不是你想要的那个“独立王国”
BFC 不是开关，而是渲染上下文的切换。真正要盯住的，永远是父容器的 display、position、float、overflow 和 contain 这五个属性的组合结果。其他样式再花哨，不落在这个清单里，就和 BFC 无关。
