BNF
Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是⼀一个⻚页⾯面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（⼀一个决定如何渲染⽂文档的容 器），因此Box内的元素会以不同的⽅方式渲染。让我们看看有哪些盒⼦子： block-level box:display 属性为 block, list-item, table 的元素，会⽣生成 block-level box。并且参与 block foma tting context； inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会⽣生成 inline-level box。并且参与 i nline formatting context； Formatting context Formatting context 是 W3C CSS2.1 规范中的⼀一个概念。它是⻚页⾯面中的⼀一块渲染区域，并且有⼀一套渲染规则，它 决定了其⼦子元素将如何定位，以及和其他元素的关系和相互作⽤用。最常⻅见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。 CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。 BFC 定义 BFC(Block formatting context)直译为"块级格式化上下⽂文"。它是⼀一个独⽴立的渲染区域，只有Block-level box参 与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 哪些元素会⽣生成BFC? 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible
IFC
在IFC中，框（boxes）⼀一个接⼀一个地⽔水平排列，起点是包含块的顶部。⽔水平⽅方向上的margin，border和padding在框之间得到 保留。框在垂直⽅方向上可以以不同的⽅方式对⻬齐：它们的顶部或底部对⻬齐，或根据其中⽂文字的基线对⻬齐。包含那些框的⻓长⽅方形区域， 会形成⼀一⾏行，叫做⾏行框(line box)。 ⼀一个⾏行框的宽度由包含它的元素的宽度和包含它的元素⾥里⾯面有没有float元素来决定，⾼高度的确定由⾏行⾼高度计算规则决定。 ⾏行框的⾼高度⾜足以包含他的内部容器，也可能⽐比它包含的容器们都⾼高（⽐比如在基线对⻬齐的时候），当他包含的内部容器的⾼高度⼩小于⾏行 框的⾼高度时，内部容器的垂直位置由⾃自⼰己的vertical（默认值是baseline）这个属性来确定。（这个性质可以⽤用来实现垂直居中）