CSS BFC(Block Formatting Context)
什么是BFC(Block formatting context)
BFC（块级格式上下文）就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
BFC 就是 ‘块级格式上下文’ 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Bloc-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
形成条件
- 浮动 float 除 none 以外的值
- 定位 position（absolute，fixed）
- display 为以下其中之一的值 inline-block，table-cell，table-caption
- overflow 除了 visible 以外的值（hidden，auto，scroll）
应用场景：
- 解决margin叠加的问题
- 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。
- 用于清除浮动，计算BFC高度。
本质
BFC的本质就是所有元素都是块级元素（或者可以当成块级元素）处理，默认情况下在垂直方向上一个接一个的放置，垂直方向上的距离由margin决定。
除此之外还有
- IFC（Inline formatting contexts）：内联格式上下文
- display: inline-box
- FFC（Flex formatting contexts）：自适应格式上下文
- display:flex/inline-flex
- GFC（GrideLayout formatting contexts）：网格布局格式化上下文
