CSS规范之BFC & IFC

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。

1. 替换和不可替换元素

从元素本身的特点来讲，可以分为替换和不可替换元素。

a) 替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：

<img src=”cat.jpg”/>
<input type="submit" name="Submit" value="提交"/>

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

b) 不可替换元素

(X)HTML的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如：

<p>段落的内容</p>

段落<p>是一个不可替换元素，文字“段落的内容”全被显示

2. 显示元素

除了可替换元素和不可替换元素的分类方式外，CSS2.1中元素还有另外的分类方式：块级元素（block-level）和行内元素（inline-level，也译作“内联”元素）。

a) 块级元素

在视觉上被格式化为块的元素，最明显的特征就是它默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即块级元素默认是独占一行的。

典型的块级元素有：<div>、<p>、<h1>到<h6>，等等。

通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。

但是浮动元素比较特殊，由于浮动，其旁边可能会有其他元素的存在。而“list-item”（列表项<li>），会在其前面生成圆点符号，或者数字序号。

b) 行内元素

行内元素不形成新内容块，即在其左右可以有其他元素，例如<a>、<span>、<strong>等，都是典型的行内级元素。

display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素，例如<img>、<input>等等。

不过元素的类型也不是固定的，通过设定CSS的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。

术语普及

盒： 每个元素都会生成一个盒，用来容纳后代（生成的盒）。所以我们可以把一个页面看做是由一个个的盒子堆砌而成的，只是这些盒子也分种类.

块级元素： display 为 block/table/list-item 的元素。

块级盒： 块级元素生成的盒

内联级元素： display 为 inline/inline-block/inline-table 的元素

内联级盒： 内联级元素生成的盒。但是只有 inline 元素生成的盒才叫做内联盒，它区别于 inline-block 元素的内联级块盒。

行盒： 内联格式化上下文中，包含来自同一行的盒的矩形区域叫做行盒

匿名块盒

FC

FC（Formating Context，格式化上下文） 是一个布局的环境，它里面的盒子需要遵循FC这套体系的规则， CSS2.1 中定义了 BFC（Block Formating Context，块级格式化上下文） 和 IFC（Inline Formating Context，内联格式化上下文）， BFC 讲的是块级盒子的布局规则， IFC 讲的是内联级盒子的布局规则。

BFC

1. 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文。（触发BFC）

2. 在一个块格式化上下文中，从包含块的顶部开始，盒在竖直方向一个接一个地放置。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。

3. 在计算生成了 BFC 的元素的高度时，其浮动子元素应该参与计算。（触发bfc 解决父容器高度坍陷的问题）

IFC

IFC中的行盒的宽度是包含块的宽度减去 float 元素（如果有的话）的宽度，行盒高度是最高的盒的top与最低的盒的bottom之间的距离。

内联盒的高度是由line-height决定的，而可替换元素，inline-block，inline-table 元素的高度则是由它们的 margin 盒高度决定的。

对‘display’，‘position’和‘float’之间关系的定义

1.同时设置’absolute’或者’fixed’、非 ‘none’ 的 float，float 会被覆盖为 ‘none’。

2.如果'display'设置为'none'，用户端必须忽略掉'position'和'float'。在这种情况下，元素不产生框。

3.即如果'position'设置为'absolute'或'fixed'且‘float’的值不为‘none’，display的值就会被设置为‘block’，所以设置display: inline; float: left;等同于float:left，display:inline 的属性并未生效。因为用户端会忽略掉对’display‘的设置。float:left和display:inline-block当然是不等同的。

position:absolute和float会隐式的改变display类型， 
不论之前是什么类型的元素（display:none除外），只要设置了position:absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，仍然无效。 
float在IE6下的双倍边距bug就是利用添加display:inline来解决的 
注意一点的是，position:relative并不能够隐式的改变display的类型