理解BFC、IFC、GFC、FFC

　

gfc

什么是fc?

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

BFC

Block Formatting Context 叫做“块级格式化上下文”。BFC的布局规则如下：

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

介绍过了BFC的布局规范，再来说说哪些元素会产生BFC。

1. 根元素；
2. float的属性不为none；
3. position为absolute或fixed；
4. display为inline-block，table-cell，table-caption，flex；
5. overflow不为visible

接下来说说BFC的作用和原理,首先看看自适应两栏布局

我们先定义两个p：

<p class="aside"></p>  
<p class="main"></p>  

然后定义css：

p {  
  width:300px;  
}  
.aside {  
  width: 100px;  
  height: 150px;  
  float: left;  
  background: black;  
}  
.main {  
  height:200px;  
  background-color:red;  
}  

效果图如下：

这正满足了规范的第三条：

每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。

所以如果我们需要将黑色区域撑到红色的左边，就需要利用规范的第四条：

BFC的区域不会与float重叠。

也就是说我们需要创造BFC区域。我们通过将红色区域的overflow设为hidden来触发BFC：

.main {  
  overflow:hidden;  
  height:200px;  
  background-color:red;  
}  

效果如下：  接下来看看清除内部浮动 首先是父p套子p

<p class="parent">  
  <p class="child"></p>  
</p>  

然后是css：

.child {  
  border:1px solid red;  
  width:100px;  
  height:100px;  
  float:left;  
}  
.parent {  
  border:1px solid black;  
  width:300px;  
}  

效果如下：  可以看到，父p压根就没有被撑开。 我们再回顾一下BFC规范中的第六条： **计算BFC的高度时，浮动元素也参与计算**。 所以我们需要将父p触发为BFC，也就是将其overflow设为hidden：

.parent {  
  border:1px solid black;  
  width:300px;  
  overflow:hidden;  
}  

效果如下：  可以看到父p已经撑开了。 再谈谈margin重叠问题。 先定义两个垂直的p：

<p class="p"></p>  
<p class="p"></p>  

然后定义margin:

.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;  
}  

可以看到margin重叠后的效果：

我们再看看BFC规范的第二条：

盒子垂直方向的距离由margin决定，属于用一个BFC的两个相邻Box的上下margin会发生重叠。

说明两者属于同一个BFC，所以我们需要两个p**不属于同一个BFC**。

为第二个p套一个父亲p，然后讲其overflow设为hidden来激活一个BFC就可以使margin不再重叠。

<p class="p"></p>  
<p class="wrap">  
  <p class="p"></p>  
</p>  

.wrap {  
  overflow:hidden;  
}  

效果如下：

IFC

IFC布局规则：

1. 框会从包含块的顶部开始，一个接一个地水平摆放。
2. 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
3. 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

得出结论：

1. 一个line box总是足够高对于包含在它内的所有盒子。然后，它也许比包含在它内最高的盒子高。(比如，盒子对齐导致基线提高了)。
2. 当盒子B的高度比包含它的line box的高度低，在line box内的B的垂值对齐线通过’vertical align’属性决定。当几个行内级盒子在一个单独的line box内不能很好的水平放置，则他们被分配成了2个或者更多的垂直重叠的line boxs.因此,一个段落是很多个line boxs的垂直叠加。Line boxs被叠加没有垂直方向上的分离(特殊情况除外)，并且他们也不重叠。
3. 通常，line box的左边缘挨着它的包含块的左边缘，右边缘挨着它的包含块的右边缘。然而，浮动盒子也许会在包含块边缘和line box边缘之间。因此，尽管line boxs在同样的行内格式上下文中通常都有相同的宽度(就是他的包含块的宽度)，但是水平方向上的空间因为浮动被减少了，它的宽度也会变得复杂。Line boxs在同样的行内格式上下文中通常在高度上是多样的(比如，一行也许包含了一个最高的图片然后其他的也可以仅仅只包含文字)
4. 当在一行中行内级盒子的总宽度比包含他们的line box的宽度小，他们的在line box中的水平放置位置由’text align’属性决定。如果属性是’justify’，用户代理可能会拉伸空间和文字在inline boxs内。
5. 当一个行内盒子超过了line box的宽度，则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs。如果一个行内盒子不能被分割。则行内盒子溢出line box。
6. 当一个行内盒子被分割，分割发生则margins,borders,和padding便没有了视觉效果。
7. 在同样的line box内的行内盒子也许会被分割成几个盒子因为双向的文字。

   Line boxs在行内格式上下文中档需要包含行内级内容时被创造。Line boxs包含没有文字，没有空格，没有带着margins,padding和borders，以及没有其他在流中的内容(比如图片，行内盒子和行内表格)，也不会以新起一行结尾。对于在他们内的任何盒子的位置都以他们决定并且必须将他们视作没有高度的line boxs。

主要影响IFC内布局的css：

font-size
line-height
height
vertical-aligin

line box

行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素（inline-level element）都会共同生成一个行盒模型。

font-size

常见的属性，用来指定文本类型节点的大小。IFC内的很多属性的值是基于这个的。

line-height & height

在一个由多个内联元素组成的块状容器内，’line-height’为内联元素的行盒模型指定了一个最低高度。 这个最低高度是分别由基线上的最小高度和基线下的最小深度组成。

从上到下四条线分别是顶线、中线、基线、底线。 那么行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离（实际在数值上，行高也等于其它相同颜色间的距离）。

vertical-align

该属性影响由多个内联元素生成的盒模型组成的行内盒模型的垂直定位。

vertical有几个特定的值，或者指定一个值。

<p class="a1">
  <span style="vertical-align:60px;">
    English中文
  </span>
  <span>
    中文English
  </span>
</p>

给第一个span，设置60px的垂直偏移量，显示如下：

其中，黄色线就是基线（baseline），绿线和黄线的间隔即为60px。 这里会发现，容器（蓝色）的高度被撑高了。

容器的高度 height = line-height + vertical-align

当然同理,如果容器的高度被指定了，那么高度则不变，而超出的部分则不影响布局。如果设置overflow:hidden，超过的部分则不可见。

而vertical-align的其它特殊值，均可以看做一个根据容器高度而变化的相对值。

相关阅读