Formatting context

Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)

BFC

BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC；

block-level box: display属性为block, list-item, table的元素，会生成block-level box。

inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。

*如何触发BFC呢？
浮动元素和绝对定位元素，非块级盒子的块级容器（如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

 float的值不为none。
 overflow的值为auto,scroll或hidden。
 display的值为table-cell, table-caption, inline-block中的任何一个。
 position的值不为relative和static。
 

*BFC 特性

 1.内部的Box会在垂直方向，一个接一个地放置。
 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
 3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
 4.BFC的区域不会与float box重叠。
 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
 6.计算BFC的高度时，浮动元素也参与计算
 

*在哪些场景可以用到BFC（如清浮动，防止 margin 重叠等）

 1.用于自适应两栏布局
 
 
 
  
清除内部浮动
 
  
防止垂直 margin 重叠
 

BFC详解

IFC

IFC为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来的

 1.IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
 2.同个ifc下的多个line box高度会不同。
 3.IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
 

那么IFC一般有什么用呢？

 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，
 通过text-align则可以使其水平居中。
 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其
 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
 

css3中的BFC,IFC,GFC和FFC