[译] 格式化上下文 #8
Description
格式化上下文
格式化上下文（Formatting contexts）是内容放置的区域。每个上下文持有其包含的元素，并且定义了一定的规则来约束其包含的元素如何放置。
最明显的格式化上下文就是整个页面。一个HTML页面定义了块级元素如何一个接一个的流动放置。在页面上，每个静态定位块级元素在下一个静态定位块级元素的上方。
块级格式化上下文（Block formatting contexts）
块级格式化上下文是我们在web设计中考虑最多的部分。一个块级格式化上下文定义了其包含的块级元素如何放置。如果你有两个段落，一个接一个，那么在格式化上下文中，第一个段落将会出现在第二个段落的上方。如果没有定义宽度，那么这两个段落将会拉伸涵盖到整个块级格式化上下文的内容宽度。
再看一下常见的没有附加样式的页面。在这样的页面中，_标签为整个页面定义了块级格式化上下文。大部分浏览器会给设置些内间距，因此内容不会碰到窗口的边缘。在_标签里，所有的段落，表格，列表等等一个接一个的在其内容区域排列。
创建多个块级格式化上下文
在一个页面里一般有许多块级格式化上下文。这是因为下面这些项可以触发创建块级格式化上下文：
- Table cells
- Table captions
- Inline blocks
- Absolutely positioned elements
- Float elements
- Elements with overflow other than visible
如果你看到HTML页面里含有这些元素，那么很明显这些元素将会创建它们自己的上下文。浮动元素，绝对定位元素和表格单元格元素内的段落都放置在这些容器里。
上面这些元素（可创建上下文的元素）内的静态（和相对）定位元素将被放置在其创建的上下文中，就像与外界隔离开来。当上下文的高度属性是_auto_，其内的浮动元素也会被创建放置在上下文中。
在某种程度上，每个块级格式化上下文有点像微型的文档，以_overflow: auto_创建上下文时最明显。_overflow: auto_的元素和iframe的行为相似，其中元素的内容类似于iframe的源文档。
多个块级格式化上下文用于设计
多个块级格式化上下文对浮动很有用。前面提到过，如果上下文的高度属性是_auto_，它将会拉伸以适应任何其所包含的浮动元素。基于这一事实，我们可以创建“自我清除”的元素，比如：
<style type="text/css">
#container {
overflow: auto;
padding: 1em;
border: 1px;
}
#floater {
float: right;
}
</style>
<div id="container">
<div id="floater">This is text on the right side.</div>
</div>
在这个示例中，外层元素的边框和内边距将包围着整个浮动元素。
块级格式化上下文能够有效地创建块级元素，并且不会被浮动元素覆盖。
<style type="text/css">
#floater {
float: left;
width: 40%;
border: 1px solid red;
margin-right: 2em;
}
#clearer {
display: table-cell;
padding: 1em;
border: 1px solid blue;
}
</style>
<div id="floater">
<p>This is floating content.</p>
</div>
<div id="clearer">
<p>This content is in a box that starts 2em's to the right of the floater.</p>
</div>
在这个示例中，红色边框的盒子浮动，蓝色边框的盒子不浮动。蓝色盒子不会被浮动的红色盒子所覆盖。相反的，两个边框之间有_2em_的空隙。
行级格式化上下文
每个块级元素包含的行内元素还将包含一个行级格式化上下文，在块级格式化上下文中，每个块级元素在页面上下一个元素的上方。在行级格式化上下文中是从左向右的，每个行内元素从左到右沿着一条线放置，直到它因为容器边界限制而需要换行。
基本上，行级格式化上下文就是一个段落，表格单元格或者任何其他文本布局。
行内元素和块级元素的定位规则是不同的。
当人们说起“盒模型”时，他们通常描述的是在块级格式化上下文中的尺寸，内间距，边框和外间距。其中，许多概念不适用于行级。尽管水平的内间距，边框和外间距对行内元素也有影响，但是垂直内间距，边框和外间距对文本行间距却没有影响。（注意它们仍然对可替换元素有效，可替代元素代表的是外部资源，比如说表单按钮或者图片，而不是文本或者改变文本格式的元素。）
行级格式化上下文的垂直空间
只有一件事会影响行内元素的垂直间距：行高。通常情况下，行高是基于同一行中文本的高度，或者是任意可替换元素的高度/内间距/边框/外间距。同一行中最大行高（或者可替代高度）的元素将决定这一行的垂直间距。
文本的高度/内间距/边框/外边距对行的高度（或者容器的高度）没有影响。相反，行间的边框、内间距、外间距会相互重叠。如果你想给行内文本设置内间距和边框，确保你有足够的行高。
行级格式化上下文的水平空间
当对行内元素设置水平边框，内间距或者外边距时，它们只作用于内联元素的两端。如果元素因为边界限制而断开换行，那么边框，内间距或者外边距
边框，内间距或者外边距并不适用于断开位置，只对元素的两端有效。
行内元素内容不会影响包含它的块级元素的宽度。如果行内内容片断大于容器（比如一个大的图片放置在一个小的浮动元素里），它将会溢出。（IE中容器则会被拉伸以适应行内元素）