关于BFC跟NFC

   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）这个属性来肯定。（这个性质能够⽤用来实现垂直居中）