（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
1. 简介
在CSS2.2中，盒子根据定位体系来布局，其必然处于某个格式化上下文中。
2. 定位体系 Positioning Schemes
在CSS2.2中，盒子可以根据以下三种体系来布局：
-
标准流（或者说普通流） Normal Flow 。CSS2.2中，标准流包括块级盒的块格式化和行内级盒的行内格式化，以及块级盒和行内级盒的相对定位。
-
浮动 Floats 。在浮动模型中，一个盒子首先根据常规流布局，然后从标准流中脱离并尽可能地向左或向右位移。内容可以漂浮在浮动周围。
-
绝对定位 Absolutr Positioning 。在绝对定位模型中，一个盒子完全从标准流中脱离（对后面的同胞元素无影响）并相对于包含块来分配一个位置。
浮动元素、绝对定位元素、根元素都被称为脱离文档流 Out of Flow ；其他没有脱离文档流的元素被称为在文档流内 In-flow 。元素 A 的流是由 A 和在所有文档流内且最近的脱离文档流的祖先是A的元素构成的的集合。
2.1选择定位体系： position属性
“position”和“float”属性决定了使用哪一个CSS 2.2定位算法来计算一个盒子的位置。
CSS2.2文档-position property
position属性值有如下含义：
-
static：盒为普通盒，根据标准流布局， top 、 right 、 bottom 、 left 属性无效。
-
relative：盒的定位根据标准流计算（这个位置被称为标准流内的位置）。接着盒相对其标准流中的位置移动。当B盒是相对定位，则B盒之后的盒定位时就当B没有移动一样来计算，也就是相对B盒标准流中的位置来计算。 position：relative对于table-row-group 、 table-header-group 、 table-footer-group 、 table-row 、 table-column-group 、 table-column 、 table-cell 以及 table-caption 元素是无效的。
-
absolute：盒的位置（还可能包括大小）由 top 、 right 、 bottom 、 left 属性指定。这些属性是相对于盒的包含块来指定移动距离的。绝对定位盒脱离文档流。这意味着它们对之后的同胞盒的布局没有影响。同时，即便绝对定位盒有外边距margin，也不同其他任何外边距折叠。
-
fixed：盒的定位根据 absolute 模型来计算，但除此之外，盒相对某些参照物保持固定。和 absolute 模型一样，盒的外边距也不同其他任何外边距折叠。在手持 handheld 、投影 projection 、屏幕 screen 、打字机 tty 、电视 tv 媒体类型中，盒相对视口固定且滚动时不会移动。在打印媒体类型中，即便页面是通过视口来访问的（比如打印预览），盒也渲染在所有页，并且根据页盒固定。其他媒体类型中则未定义此表现。开发者可根据依赖媒体来指定 fixed 。比如说，如果想使盒固定在屏幕视口顶部，但不出现在打印页的顶部，这两种设定可以通过使用@media规则来分开，如下：
@media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}
用户代理不可将固定盒的内容分页显示。注意用户代理可能用其他方法打印不可见内容。
用户代理会将根元素上的 position 视为 static 。
2.2 盒偏移box offset：top，right，bottom，left属性
如果某个元素的“position”属性具有非“static”值，则该元素将被定位。定位元素生成定位盒，根据以下四个属性布局:
- top
此属性指定绝对定位盒的top margin edge在其包含块的top edge向下偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的top edge。属性值如果是百分比，则是根据其包含块的height来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。 - right
此属性指定绝对定位盒的right margin edge在其包含块的right edge向左偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的right edge。属性值如果是百分比，则是根据其包含块的width来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。 - bottom
此属性指定绝对定位盒的bottom margin edge在其包含块的bottom edge向上偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的bottom edge。属性值如果是百分比，则是根据其包含块的height来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。 - left
此属性指定绝对定位盒的left margin edge在其包含块的left edge向左偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的left edge。属性值如果是百分比，则是根据其包含块的width来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。
3. 常规流 Normal flow与格式化上下文formatting context
CSS2.1中规定，常规流中的盒子都属于某个格式化上下文，要么块格式化上下文，要么行内格式化上下文，总之不能二者得兼。块级盒参与块格式化上下文，行内级盒参与行内格式化上下文。
CSS2.2中对这个规定有了新的解释。引入了表格式化上下文。并且声明，在CSS的未来级别，将引入其他类型的格式化上下文。
果不其然，CSS3中，引入了GFC，FFC和RFC
4. 关于格式化上下文FC的简单介绍
首先我们来理解一下，什么是FC。FC的英文全称是：Formatting Contexts，直译为“格式化上下文”，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系与相互作用。
那么，FC包含哪些类型呢？答案是六种类型：BFC、IFC、TFC、GFC 、FFC，RFC。需要注意的是，CSS2.1规范中只有BFC和IFC，CSS2.2中出现TFC，CSS3才有GFC，FFC和RFC。
(以下内容还在逐步比照官方文档解读和修改中，详细内容可以点击“详细了解”)
4.1. BFC(详细了解)
BFC的英文全称是：Block Formatting Contexts，直译为“块格式化上下文”。BFC就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。
- BFC拥有如下特性：
- 内部的Box会在垂直方向，从顶部往下一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，即会产生margin折叠。
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box叠加。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动元素也参与计算。
- 如何生成BFC：
- 根元素，即HTML元素。
- float的值不为none。
- overflow的值不为visible。
- position的值不为relative和static。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- BFC常见用途：
- 常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。
- 防止margin折叠。
- 防止高度塌陷。
4.2. IFC
IFC的英文全称是：Inline Formatting Contexts，直译为"行内格式化上下文"。IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)。
- IFC拥有如下特性
- IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
- IFC中是不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC。每个IFC对外表现为块级元素，与div垂直排列。
- IFC常见用途：
- 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
- 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
4.3 TFC
TFC的英文全称是：Table Formatting Contexts，直译为“表格式化上下文”。
（待补充...）
4.4 GFC
GFC的英文全称是：Grid Formatting Contexts，直译为“网格格式化上下文”。当为一个元素设置display:grid的时候，此元素将会获得一个独立的渲染区域。我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。
4.5. FFC
FFC的英文全称是：Flex Formatting Contexts，直译为“弹性格式化上下文”。display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或 inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox定义了伸缩容器内伸缩项目该如何布局。
整体来说，FFC与BFC有点儿类似，但有以下几点区别：
- Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素。
- vertical-align对Flexbox中的子元素是没有效果的。
- float 和 clear 属性对Flexbox中的子元素是没有效果的，也不会使子元素脱离文档流(但是对Flexbox 是有效果的！)。
- 多栏布局（column-*） 在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在Flexbox 排列其下的子元素。
- Flexbox 下的子元素不会继承父级容器的宽度。
4.6 RFC
RFC的英文全称是：Ruby Formatting Contexts。这一块我暂时没去研究。
参考
https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS2/visuren.html
CSS规范 > 9 视觉格式化模型 Visual Formatting Model
css3中的BFC,IFC,GFC和FFC
CSS之BFC、IFC、GFC和FFC
浅析css中的BFC、IFC、GFC和FFC
什么是BFC、IFC、GFC和FFC
网友评论