css中的IFC

  IFC(Inline Formatting Context),直译为“行内格式化上下文”，这是什么鬼的翻译啊？反正我对于名词一向采用拿来主义，理解名词背后的含义才是硬道理。
  我们简单理解为每个盒子都有一个FC特性，不同的FC值代表一组盒子不同的排列方式。有的FC值表示盒子从上到下垂直排列，有的FC值表示盒子从左到右水平排列等等。而IFC则是表示盒子从左到右的水平排列方式，仅此而已(注意：一个盒子仅且仅有一个FC值)。而inline-level box的FC特性值固定为IFC。
  另外仅处于in-flow的盒子才具有FC特性，也就是positioning scheme必须为Normal flow的盒子才具有FC特性。
  除了IFC外，对于inline-level box排版而言还有另一个重要的对象，那就是line box。line box是一个看不见摸不着的边框，但每一行所占的垂直高度其实是指line box的高度，而不是inline-level box的高度。
  line box的特点：
  1. 同一行inline-level box均属于同一个line box；
  2. line box高度的计算方式(https://www.w3.org/TR/CSS21/visudet.html#line-height)
>The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. 
>The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.
>The line box height is the distance between the uppermost box top and the lowermost box bottom.

.parent{  line-height: 1;  font-size: 14px;   border: solid 1px yellow;}.child{  font-size: 30px;  vertical-align: middle;   border: solid 1px blue;}.inline-block{  display: inline-block;  overflow: hidden;   border: solid 1px red;}.other{  border: solid 1px green;}

<span class="parent">  <span class="child">    <span class="inline-block">display:inline-block元素</span>    xp子元素的文字  </span>  xp父元素的文字</span><div class="other">其他元素</div>

1. 根据规则，span.parent所在行的line box的高度受span.parent、span.child、span.inline-block元素对应的inline-level box"高度"的影响。其中span.parent的"高度"为其line-height实际值，span.child的"高度"为其line-height实际值，而span.inline-block的"高度"为其margin box的高度。由于设置line-height:1，因此span.parent和span.child的content box高度等于line-height实际值;
2. 根据vertical-align属性垂直对齐，造成各“高度”间并不以上边界或下边界对齐;
3. span.inline-block红色的上边框(border top)到span.child蓝色的下边框(border bottom)的距离再减去1px即为line box的高度。(line box的下界其实是span.child的content box的下限的，你看"其他元素"的上边框不是和span.child的下边框重叠了吗？如果那是line box的下界，那怎会出现重叠呢)

这里又涉及到另一个属性vertical-align了，由于它十分复杂，还是另开文章来叙述吧！

                      行级盒子小结                           
**就盒子模型而言**
  1. inline-level box与block-level box结构一致;
  2. content box的高度仅能通过属性font-size来设置，content box的宽度则自适应其内容而无法通过属性width设置;
  3. 当inline-level box的宽度大于containing block，且达到内容换行条件时，会将inline-level拆散为多个inline-level box并分布到多行中，然后当属性direction为ltr时，margin/border/padding-left将作用于第一个的inline-level box，margin/border/padding-right将作用于最后一个的inline-level box;若属性direction为rtl时，margin/border/padding-right将作用于第一个的inline-level box，margin/border/padding-left将作用于最后一个的inline-level box。
  
**垂直排版特性**
  inline-level box排版单位不是其本身，而是line box。重点在于line box高度的计算。
  1. 位于该行上的所有in-flow的inline-level box均参与该行line box高度的计算;(注意：是所有inline-level box，而不仅仅是子元素所生成的inline-level box)
  2. replaced elements, inline-block elements, and inline-table elements将以其对应的opaque inline-level box的margin box高度参与line box高度的计算。而其他inline-level box则以line-height的实际值参与line box高度的计算;
  3. 各inline-level box根据vertical-align属性值相对各自的父容器作垂直方向对齐;
  4. 最上方的box的上边界到最下方的下边界则是line box的高度。（表述不够清晰，请参考实例理解）