- 常规流布局（文档流布局）
元素按照它们在 HTML 代码中的顺序自上而下、自左向右地排列。 常规流布局主要包括两类元素：块级元素和行内元素。
- 块级元素
块级元素会独占一行，即它们会从上到下排列。 块级元素默认的宽度为其父容器的宽度，高度取决于其内容。 常见的块级元素有：
<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等。
- 行内元素
行内元素会在同一行内从左到右排列，直到容器宽度不足时才会换行。 行内元素的宽度和高度取决于其内容，而不是父容器的尺寸。 常见的行内元素有：
<span>、<a>、<strong>、<em>、<img>等。
- 格式规范
外部显示类型为block（块级盒子），参与BFC 外部显示类型为inline（内联级盒子），参与IFC
- 格式化上下文
CSS 盒子模型的一部分，它定义了一组规则来描述如何对元素进行布局。
格式化上下文布局规范
“在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin“属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。 在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。
BFC（块级格式化上下文）
BFC 是块级元素的布局环境，这些元素按照垂直方向一个接一个地排列。 在 BFC 中，每个元素的左外边距与上一个元素的右外边距相邻，但不会重叠。 BFC 中的元素不会受到外部浮动元素的影响，可以用来清除浮动。 BFC 是一个独立的容器，内部元素的布局不会影响到外部元素，反之亦然。
IFC（内联级格式化上下文）
IFC 是行内元素的布局环境，这些元素按照水平方向一个接一个地排列。 在 IFC 中，行内元素会根据它们在文档流中的顺序排列，并根据字体的基线对齐。 IFC 会自动调整行高以适应最高的行内元素，因此，IFC 中的行高可能不同。 IFC 中的元素与块级元素不同，不会独占一行，而是尽可能地填充水平空间，直到容器宽度不足时才会换行。
