BFC是浏览器满足特定条件时自动创建的独立渲染区域，用于解决浮动导致的高度塌陷等问题；它通过强制包含浮动子元素来重新计算容器高度，display: flow-root是推荐的无副作用触发方式。

什么是BFC：不是属性，而是浏览器的渲染规则

BFC（Block Formatting Context，块级格式化上下文）不是某个CSS属性，而是浏览器在满足特定条件时自动创建的一种独立渲染区域。你可以把它想象成一个“隔离房间”：房间里的元素怎么排、多高、边距怎么算，都只在房间里决定；外面的布局进不来，里面的浮动也出不去。

关键点在于：它不靠声明开启，而靠触发条件激活。只要元素满足任一条件，浏览器就会为它新建一个BFC——比如设置 ov

erflow: hidden、float: left、display: flow-root 等。

为什么BFC能清除浮动：从格式化上下文机制看高度塌陷根源

浮动元素会脱离普通文档流，导致父容器在计算自身高度时“看不见”它们——这叫高度塌陷。而BFC之所以能解决这个问题，根本原因在于它的格式化上下文机制强制要求：容器必须包含所有子元素（含浮动）来确定自身边界。

换句话说，BFC改变了父容器的“高度计算逻辑”：

• 普通容器：只按非浮动内容撑高
• BFC容器：把浮动子元素也纳入高度计算范围，自动撑开

这不是“清除”了浮动，而是让父容器重新承认浮动元素的存在——所以背景、边框、后续兄弟元素位置都能恢复正常。

哪些写法真正触发BFC？别踩 overflow:hidden 的坑

常见但有副作用的写法是 overflow: hidden，它确实触发BFC，但也可能意外裁剪阴影、下拉菜单、滚动条等溢出内容。更干净的选择是：

• display: flow-root —— 专为创建无副作用BFC设计，Chrome 64+/Firefox 62+ 支持
• display: flex 或 display: grid —— 父容器设为flex/grid后，子项不再脱离流，天然不塌陷
• float: left / position: absolute —— 虽然有效，但会改变元素定位行为，慎用于父容器

示例对比：

.container-bfc {
  display: flow-root; /* 推荐：语义明确，无副作用 */
}
.container-legacy {
  overflow: hidden; /* 有效但危险：可能隐藏 popper、tooltip */
}

和 clearfix 的关系：BFC 是原理，clearfix 是实现手段之一

经典 .clearfix 的伪元素方案（::after { content: ""; display: table; clear: both; }），本质是利用 display: table 触发BFC，再用 clear: both 确保伪元素落在浮动下方——它不是魔法，而是对BFC机制的一次“手动模拟”。

现代开发中，如果不需要兼容 IE8–，直接用 display: flow-root 替代 .clearfix 更轻量、可读性更强；若需兼容老浏览器，overflow: hidden + 注释说明风险，比空div或zoom hack更可控。

容易被忽略的是：BFC只作用于直系父容器。如果你给子元素设了BFC，但父容器没设，照样塌陷——必须在那个“塌陷的父容器”上触发，才起效。