静态补充CSS之IFC、FFC、GFC讲解

Web页面的布局

常见的主要有：“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等。

IFC简介：

IFC–Inline Formatting Context（行级格式化上下文）

布局规则：

（1）在一个行内格式化上下文中，盒是一个接一个水平放置。

（2）这些盒之间的水平margin，border和padding都有效。

（3）盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。

（4）行内块级元素之间默认留有间隙。

（5）矩形区域包含着来自一行的盒子叫做line box，line box的宽度由浮动情况和它的包含块决定，高度由line-height的计算结果决定。

FFC简介

FFC-----Flexible Formatting Context（弹性盒格式化上下文）

CSS3引入了一种新的布局模型——flex布局。

flex是flexible box的缩写，一般称之为弹性盒模型。

和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。

flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)。

GFC简介

GFC–Grids Formatting Context（网格格式化上下文）

CSS3引入的一种新的布局模型——Grids网格布局，目前暂未推广使用，使用频率较低，简单了解即可。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

Grid 布局远比 Flex 布局强大。

文档流

"流"是render tree（渲染树）在布局时的一个概念。

渲染规则：

流实际上规定了元素怎么排放以及相互作用（之前讲的渲染规则）。

在CSS中主要有三种流： normal flow（普通流，我们经常将的脱离，脱离的就是它）、floats浮动流、Absolute Positioning定位流（position不为static、relative）。

脱离文档流

将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

总结：

（1）BFC为块级格式化上下文
（2）IFC为行级格式化上下文
（3）GFC和FFC为CSS3新布局属性