面试题准备（十四）：BFC 块级格式化上下文

概念

BFC — Block Formatting Context — 块级格式化上下文
它是一个独立容器，确定了元素如何对其内容进行定位，以及与其它元素的相互作用
简单来说，BFC 是一个封闭的盒子，盒子内外元素不会互相干扰，且盒子内有盒子外元素所不具备的属性

如何触发 BFC

1. overflow 不为 visible
2. float 不为 none
3. position 不为 static 和 relative
4. display 为 inline-block / table / table-cell / table-caption / flex / inline-flex

BFC 使用案例

解决 margin 塌陷和 margin 合并

在面试题准备（十三）：盒子模型中，提到这个问题应使用 BFC 来解决，下面测试效果

清除浮动 — 包裹浮动元素

如图，父元素（黑色部分）并未设置高度，此时若将子元素（绿色部分）设为浮动元素，将发生高度塌陷（脱离文档流浮动），若要使得父元素被子元素撑开，则需给父元素设置 BFC

给父元素设置 display: inline-box; ，可以看到，触发了 BFC ，浮动已被清除，父元素被子元素撑开了

阻止浮动元素覆盖

总结

BFC 即块级格式化上下文，简单来说就是形成自我的小天地，小天地内的元素与外界元素互不干扰，且有特殊的规则，即在与浮动有重叠时，它将把自己变窄，计算高度时，也会将内部子级元素的高度计算进去