BFC是什么？

简单说BFC(Block Formatting Context)是块级元素的机制，需要在特定情况下才会激活。

激活的BFC

当一个块级盒子触发BFC之后，其内部形成独立环境，在里面做任何事都不会对盒子外部有影响。而且浮动的元素不会覆盖触发了BFC的盒子。

如何触发BFC

• 浮动元素（元素的 float 不是 none)
• 绝对定位元素（元素的 position为 absolute 或 fixed）
• 行内块元素（元素的 display 为inline-block）
• overflow 值不为 visible 的块元素（常用overflow: hidden;）
• 等等。。。。。。

应用场景

解决外边距塌陷问题

BFC1.gif

解决浮动盒子撑不开父级元素的问题

BFC2.gif

制作自适应两栏效果

BFC3.gif