CSS中的BFC概念

什么是BFC?

块级格式化上下文。

BFC的原理的目的

可以知道一些问题为什么出现，书写页面相关效果的时候,可以有多个方法。

触发BFC的条件

1. HTML默认就是一个人BFC。
2. 添加浮动且属性值不是none也可以成为BFC。
3. overflow的属性值不为visible也可以成为BFC。
4. display的属性值是 inline-block   table-cell  table-caption  flex  inline-flex。
5. position的属性值是absolute或者fixed。

BFC的特性

1. 盒子在垂直方向上可以通过margin设置间距,属于同一个BFC内部的盒子会发生margin重叠。（解释了2个并列的盒子,margin-top和margin-bottom的间距会发生重叠的原因）
2. BFC区域不会与浮动盒子发生重叠。（可以通过这个书写自适应两、三栏布局）
3. 计算BFC高度的时候,浮动盒子也参与计算，可以有很多解决高度塌陷的方法。
4. 在BFC内部,垂直方向上box一个接一个的放置。
5. 每个盒子margin box的左边和包含块border box的左边相接触。
6. 每个BFC都是一个独立的区域,里面的不会影响外面的。