css--IFC(内联格式化上下文)

FC

FC（Formatting Context）格式化上下文，其实指的是一个渲染区域，拥有一套渲染规则;
它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。
它是CSS2.1规范中的一个概念；常见的有IFC和BFC

IFC

1.中文名：内联(行)格式化上下文
2.英文全称：Inline Formatting Contexts
3.形成条件:
3.1IFC由不包含块级盒的块容器盒建立(块容器盒中只有内联级盒子)。
内联元素(inline-elemet)很容易理解(display:inline),它能生成inline-level boxes,但只有在IFC内的才称之为inline box

• 布局规则：

1. 在一个IFC里，盒是一个接一个从顶部水平放置。
2. 摆放这些框，它们水平方向的margin,padding,border所占空间会被计算在内。
3. 行盒的高度由行盒内最高的inline boxes决定。
4. 垂直方向，可通过vertical-align设置文本基线，取值可以是具体像素值，也可以是middle等方向词。
5. 当内部的容器盒子太多了一个line box装不下来，他们折行之后会变成两个或者多个line box， line box们垂直方向无间隔地堆叠，但不能重叠
6. 浮动后IFC内部的浮动元素宽高参与IFC的line-box宽高计算并且从换行后的行开始排列
   

<div>
    <strong>众里寻她千百度strong>
    <span>会挽雕弓如满月 <em>西北望，射天狼em>span>
    <b>衣带渐宽终不悔b>
    <i>昨夜西风凋碧树i>
div>

 /* 1. 在一个IFC里，盒是一个接一个从顶部水平放置。 */
div {
    /* 5.当内部的容器盒子太多了一个line box装不下来，他们折行之后会变成两个多个line box， line box们垂直方向无间隔地堆叠，但不能重叠 */
    width: 600px;
    border: 5px solid;
}
strong,
span,
b,
i {
    border: 2px solid #f60;
}
strong {
    /* 2. 摆放这些框，它们水平方向的margin,padding,border所占空间会被计内。 */
    margin: 30px;
    padding: 20px;
}
b {
    /* 3. 行盒的高度由行盒内最高的inline boxes决定。 */
    font-size: 30px;
    /* 4.垂直方向，可通过vertical-align设置文本基线，取值可以是具体像素值，以是middle等方向词。 */
    vertical-align: middle;
}
i {
    /* 6.浮动后IFC内部的浮动元素宽高参与IFC的line-box宽高计算并且从换行后的始排列 */
    float: left;
    width: 200px;
    height: 50px;
}
em {
    border: 4px solid #09f;
    /* 行高的影响 */
    line-height: 100px;
}

• 以上内容请自行打开/关闭注释调试

主要影响IFC内布局的CSS属性：
1.font-size
2.line-height
3.height
4.vertical-align