Formatting Context与布局

BOX

概念：CSS布局的基本单位
解释：BOX是CSS布局的基本单位，元素的类型和dispaly属性，决定了这个元素的的BOX类型，BOX的类型分为：
【block-level box】
display属性值为：block、list-item、table 的元素会生成 block-levle box，并且参与 block formatting context 布局
【inline-level box】
display属性值为：inline、inline-block、inline-table 的元素会生成 inline-level box，并参与 inline formatting context 布局
【run-in box】
CSS3中定义

Formatting Context

概念：Formatting Context 【格式化上下文】
解释：它是一个决定如何渲染文档的容器，常见的 Formatting Context 如下：
【Block formatting context】(BFC)
【Inline formatting context】(IFC)
【Grid formatting context】(GFC)
【Flex formatting context】(FFC)

BFC

创建一个独立的渲染区域，并规定了 block-level box 如何布局，且与这个区域外部毫不相关

BFC布局规则如下(注意BFC只影响块儿级盒)：

内部Box按垂直方向一个接一个的放置
Box垂直方向的距离由margin值决定，并且属于同一个BFC的两个相邻的box的margin值会重叠
每个元素的 margin-box 的左边与包含块儿 border-box 的左边相接触
BFC的区域不会与浮动盒子重叠
BFC就是一个隔绝的容器，容器里面的子元素不影响外面元素的布局，反之亦然
计算BFC的高度时，浮动元素也参与计算
以下CSS属性，将会触发BFC：

根元素，即
float 属性值不为 none
position 属性的值为 absolute 或 fixed
overflow 属性值不为 visible
display 属性值为 inline-block, table-cell, table-caption
BFC的应用
自适应两栏布局
利用的是 BFC 不与浮动元素重叠的特性
清楚浮动
利用BFC内浮动元素也参与BFC高度计算的特性
解决margin折叠(传递)
子元素的margin-top传递到父级
防止margin重叠
因为BFC内相邻元素的margin值会重叠，如果给其中一个元素包一层，并设置为BFC，又因为BFC内子元素的布局与外部元素互不影响的特性，就可以解决重叠的问题

FFC

FFC(Flex Formatting Contexts)直译为”自适应格式化上下文”.

display值为flex或者inline-flex的元素将会生成自适应容器（flex container）
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

GFC

GFC(GridLayout Formatting Contexts)直译为”网格布局格式化上下文”

当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性，在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

IFC

IFC(Inline Formatting Contexts)直译为”内联格式化上下文”

IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个IFC下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
那么IFC一般有什么用呢？
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

IE haslayout

IE 是个奇葩，自己搞一个叫做 haslayout 的东西，类似 BFC，一般在 IE 中显示有问题的东西都可以通过触发 haslayout 来解决，触发方法有很多：

zoom 属性设置为除 normal 以外的值
width/height 除 auto 以外的值
float 除 none 以外的值