盒子的Block Format Context(BFC)模式

1、什么是盒子的BFC模式？

根据英文的翻译，Block Format Context块级格式化上下文。黑子开启这个模式之后，此时这个盒子就是一个独立的渲染区域，在这个区域内做操作，不会影响到外界的布局。

2、为什么要开启这个模式？

在学习或者工作中，我们会遇到这种情况，上面的盒子设置margin-buta，下面盒子设置margin-top为b，这两个盒子最终上下间距，不是a+b，而是取决于这两个值最大的一个，这时候，你会发现他们重叠到一起了。惊奇的以为这是bug，其实不是的，浏览器解析解析规则就是这样的。

还有一些时候，会因为有一些盒子没有给定指高宽，再加上设置了float浮动，就可能会出现盒子塌陷的问题，这是因为有些盒子他不是一个独立的渲染区域，很容易受到外界的影响，这时候，你就而已给定指定的宽高，或者开启BFC模式来清除浮动。

3、那么怎么开启BFC模式呢？

很常见的有，overflow属性：hidde，或者scoll，除了visible，都是可以开启BFC的

还有float属性，除了属性值为none（这不就是相当于没做吗，哈哈）

还有positon为absolute或者为fixed的时候

display：inline-block，table-cell，table-caption，flex，inline-flex，display基本上的属性都是可以开启这个模式的。