CSS之BFC理解

BFC：块级格式化上下文，类似于形成一个独立的布局空间，使其内部与外部的元素互不影响。

通常被用来解决：1、解决浮动元素令父元素高度坍塌的问题-清除浮动，2、外间距重叠引起的高度塌陷（实用）；

如何形成：1、根元素，2、float：left/right，3、position：left/right，4、display：inline-block/flex/grid,5、overflow：auto/hidden/scroll(常用)；

IFC：内联格式化上下文，一般都是水平布局的行内元素及行内块元素，display：inline/inline-block；作用：水平居中【text-align：center】垂直居中【vertical-align:middle】

FFC：自适应格式化上下文，display：flex/inline-flex；

GFC：网格布局格式化上下文，display：grid；