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

布局规则： 在一个IFC里，盒是一个接一个从顶部水平放置。摆放这些框，它们水平方向的margin,padding,border所占空间会被计算在内。行盒的高度由行盒内最高的inline boxes决定。垂直方向，可通过vertical-align设置文本基线，取值可以是具体像素值，也可以是middle等方向词。当内部的容器盒子太多了一个line box装不下来，他们折行之后会变成两个或者多个line box， line box们垂直方向无间隔地堆叠，但不能重叠浮动后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