(37) BFC IFC GFC FFC概念

一、什么是FC？

Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

二、BFC块级格式化上下文

1.BFC布局规则

• 内部的盒子会在垂直方向，一个个地放置。
• 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。
• 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。
• BFC的区域不会与float重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

2.产生BFC的方式

• 根元素。
• float的属性不为none。
• position为absolute或fixed。
• display为inline-block，table-cell，table-caption，flex。
• overflow不为visible。

三、IFC行内格式化上下文

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垂直排列。

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会再外层产生IFC，通过text-align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align：middle，其他行内元素则可以在此父元素下垂直居中。

四、GFC网格布局格式化上下文

GridLayout Formatting Contexts，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网络容器上定义网格定义行和网格定义列属性在网格项目上定义网格行和网格列为每一个项目定义位置和空间。

那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

五、FFC自适应格式化上下文

Flex Formatting Contexts，display值为flex或者inline-flex的元素将会生成自适应容器，多用于移动端。

Flex Box由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox定义了伸缩容器内伸缩项目该如何布局。