bfc是浏览器渲染时自动触发的布局隔离模式，满足特定条件（如overflow非visible、display: flow-root等）的元素会创建bfc，使其子元素与外部布局完全隔开，解决margin塌陷、浮动撑不开父容器等问题。
什么是BFC？别被概念绕晕，它就干一件事
BFC不是新语法，也不是CSS属性，而是浏览器渲染时自动触发的一种「布局隔离模式」。只要满足特定条件（比如overflow不为visible、display: flow-root、float非none等），元素就会创建BFC——它的子元素在布局上就和外部完全隔开，互不干扰。
常见错误现象：margin-top塌陷、浮动元素撑不开父容器、文字环绕失效、清除浮动写一堆::after却还是漏样式。
-
display: flow-root是最干净的主动触发方式，现代浏览器全支持，推荐优先用 -
overflow: hidden虽常用，但会意外裁剪溢出内容（比如下拉菜单、tooltip），慎用 -
float: left或right也能创建BFC，但会让元素脱离文档流，通常不是你想要的效果
怎么用display: flow-root解决父容器高度塌陷
浮动子元素导致父容器高度为0，是BFC最典型的应用场景。以前靠clearfix hack，现在一行CSS就能破局。
使用场景：卡片列表、侧边栏+主内容布局、任何含float子项又需要自适应高度的容器。
立即学习“前端免费学习笔记（深入）”；
article {
display: flow-root; /* 不再需要 .clearfix */
}
article img {
float: left;
margin-right: 1rem;
}- 相比
overflow: hidden，flow-root不会隐藏box-shadow或绝对定位溢出部分 - IE不支持
flow-root，如需兼容，可降级为display: table（副作用小）或加@supports条件判断 - 注意：它只影响该元素自身及其子元素的布局关系，不影响兄弟元素的排列逻辑
margin塌陷为什么只发生在BFC外部
相邻块级元素的上下margin会合并，但一旦其中一个处于BFC中，合并就立刻停止——因为BFC内部是独立的布局环境。
常见错误现象：两个div紧挨着，设了margin-bottom: 20px和margin-top: 30px，结果只看到30px间距，而不是50px。
- 给上面那个
div加display: flow-root，它的margin-bottom就不再和下面元素合并 -
padding或border也能阻止塌陷，但那是靠“物理隔离”，而BFC是“逻辑隔离”，更本质 - 不要试图用
margin-top: -1px硬调，这属于掩盖问题，且响应式下极易失效
BFC的性能和嵌套陷阱
创建BFC本身几乎没有性能代价，但滥用会导致意料外的布局断裂和调试困难。
性能 / 兼容性影响：每个BFC都是一个独立的渲染上下文，嵌套过深可能让开发者误判元素层级关系；某些旧版安卓WebView对flow-root支持不稳定。
- 避免在列表项（
li）、表格单元格（td）里无意义地加overflow: hidden，容易截断position: absolute子元素 - 用
getComputedStyle(el).display查不到是否处于BFC，得靠触发条件反推（比如看overflow值或display是否为flow-root） - Flex/Grid容器默认不形成BFC（它们有自己的格式化上下文），所以不能指望
display: flex解决margin塌陷
真正难的是判断「该不该建BFC」——有时候问题根源是盒模型理解偏差，而不是缺一个flow-root。先确认是不是真的需要隔离，再动手。
