# 可视化格式模型
> by [九月](https://i.getshell.cn/)
[TOC]
## 9.1 可视化格式模型简介
本章和下一章描述了可视化格式模型：用户端在图形媒介下如何处理文档树。
可视化格式模型中，每一个文档树中的元素根据包含框模型产生零个或多个控制框。这些框的布局由下列内容控制：
* 盒子的尺寸和类型
* 定位方案（常规布局流，浮动和绝对）
* 文档树中元素间的关系
* 外部信息（例如，视点大小，图片的内在尺寸等）
本章和下一章中定义的属性适用于连续媒介和页面媒介。不过外边距属性的含义在应用到页面媒介时会有些不同（详细内容请参见页面模型）
可视化格式模型并不指定格式化的所有方面（例如，它并不指定字符间距算法）。与CSS一致的用户端在处理本规范未包含的格式化情形时，表现可能有所不同。
### 9.1.1 视点
连续媒介的用户端通常提供给用户一个视点（屏幕上的一个窗口或浏览区域），通过它用户来浏览文档。当视点尺寸改变时，用户端可能改变文档的布局（**参见初始包含块**）。如果视点比文档的初始包含块小，用户端可能提供滚动机制。对于一个渲染区域而言，最多只能有一个视点，不过用户端可以对多个渲染区域加以渲染（即对同一文档提供不同的视点）。
### 9.1.2 容器块
在CSS 2.2中，许多盒子的位置和大小是相对于称为容器块的矩形框的边计算的。 一般而言，生成的盒子充当后代盒子的容器块; 我们说一个盒子为它的后代“建立”容器块。 短语“一个盒子的容器块”是指“盒子所在的容器块”，而不是它所生成的那个块。
基于盒子的容器块，每一个盒子都有一个定位，不过它不被容器块所限制；它可能溢出。
下一章将详细介绍如何计算容器块的尺寸。
## 9.2 控制盒子的生成
下面的几节描述了CSS2中可能生成的包含框的类型。一个框的类型部分地影响它在可视化格式模型中的表现。以下讨论的['display'](https://www.w3.org/TR/CSS22/visuren.html#propdef-display)属性决定了框的类型。
'display'属性的某些值会导致源文档的元素生成包含后代框和生成内容的主体框，也是任何定位方案中涉及的框。一些元素除了主体框外还可能生成额外的框：'list-item'元素。这些额外的盒子相对于主盒子放置。
### 9.2.1 块类元素和块控制框
块级元素 - 源文档中那些以块（例如段落）形式可视化格式化的元素 - 是生成块级主体框的元素。使得元素块级别的'display'属性的值包括：'block'，'list-item'和'table'。块级框是参与[块格式上下文的框](https://www.w3.org/TR/CSS22/visuren.html#block-formatting)。
在css 2.2中，块级容器也是块容器盒，除非它是一个表格框或替换元素的主体框。块容器框只包含块级框或建立[内联格式上下文](https://www.w3.org/TR/CSS22/visuren.html#inline-formatting)，因此仅包含[内联级框](https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level)。其主体框是块容器框的元素是块容器元素。'display'属性的值使得一个非替换元素生成一个块容器，包括'block'，'list-item'和'inline-block'。并非所有的块容器盒都是块级盒子：未替换的嵌入块和未替换的表格单元是块容器，但不是块级别的。也是块容器的块级别框称为块框。
有时将"block-level box," "block container box," 和"block box" 这三个术语明确的缩写为“块”。
#### 9.2.1.1 匿名块控制框
有这样一个文档：
~~~
<DIV>
Some text
<P>More text
</DIV>
~~~
（并假定DIV和P都设置了'display: block'），DIV看来包含行内和块内容。为了使格式化简单一些，我们假定有一个匿名块控制框围绕在"Some text"周围。
句话说：如果一个块控制框（如上例中为DIV生成的框）在其中包含另外一个块框（如上例中的P），我们强迫它在其内只包含块框，而将任何的行内框都包含在一个匿名块框之内。
当内联框包含一个流内块级框时，内联框（及其在同一个线框内的内联祖先）将在块级框（以及任何仅通过连续或分隔的块级兄弟可折叠的空白和/或流失的元素），将内联框分成两个框（即使任何一边都是空的），块级框的每一边都有一个框。在休息之前和休息之后的线框被包围在匿名块框中，并且块级框成为这些匿名框的兄弟。当这种内联框受到相对定位的影响时，任何生成的转换也会影响内联框中包含的块级框。
~~~
如果遵循以下规则，此模型将应用于以下示例中：
p { display: inline }
span { display: block }
were used with this HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>
p元素包含一个匿名文本块（c1），后面跟着一个块级元素，后面跟着另一个匿名文本块（c2）。结果框将是一个代表正文的块框，其中包含c1周围的匿名块框，span块框以及c2周围的另一个匿名块框。
~~~
匿名框的属性从封闭的非匿名框继承（例如，在小节标题“anonymous block boxes”下的示例中，div的一个）。非继承属性具有初始值。例如，匿名框的字体是从div继承的，但边距将为0。
设置在导致生成匿名块框的元素上的属性仍然适用于该元素的框和内容。例如，如果在上例中p元素上设置了边框，则将围绕c1（在行的末尾打开）和c2（在行的开头处打开）绘制边框。
一些用户代理已经以其他方式在包含块的内联上实现了边界，例如，通过在“匿名线框”内包装这些嵌套块并因此在这些框周围绘制内联边框。因为css1和css2没有定义这种行为，所以只有css1和css2的用户代理可以实现这个替代模型，并且仍然声称符合这部分的css 2.2。这不适用于本规范发布后开发的UAS。
在解析引用它的百分比值时，匿名块框将被忽略：改为使用最接近的非匿名祖代框。例如，如果上面div中的匿名块框的子节点需要知道其包含块的高度以解析百分比高度，则它将使用由div形成的包含块的高度，而不是匿名块的高度框。
### 9.2.2 行内类元素和行内控制框
*内联级元素* 是源文档中不构成新内容块的那些元素;内容按行分布（例如，段落内的强调文本片段，内联图像等）。'display'属性的以下值使元素内嵌级别：'inline'，'inline-table'和'inline-block'。内联级元素生成内联级框，这些框是参与内联格式化上下文的框。
一个内联框是一个内联框，它的内容参与其内联格式化上下文。“显示”值为“内联”的非替换元素会生成内联框。不是内联框的内联级框（如替换内联级元素，内嵌块元素和内联表元素）被称为原子内联级框，因为它们作为单个不透明框参与其内联格式化上下文。
#### 9.2.2.1 匿名行内控制框
~~~
在如下的文档中：
<P>Some <EM>emphasized</em> text</P>
P元素生成一个块控制框，其内还有几个行内框。"emphasized"的框是一个行内元素（EM）产生的行内框，而其它的框（"Some"和"text"）是块类元素（P）产生的。后者就称为匿名行内控制框，因为它们没有与之相关的行内元素。
这样的行内框从其父块框那里继承可以继承的属性。非继承属性取它们的初始值。例子中，初始匿名框的颜色继承自P，而背景是透明的。
如果根据上下文可以确定匿名框是哪种类型，匿名行内控制框和匿名块控制框在本规范中都被称为匿名控制框（匿名框）。
在格式化表格时，还会出现更多类型的匿名框。
~~~
### 9.2.3 运行框
[该部分的存在使节号与前面的草稿相同。'display：run-in'现在在css level 3中定义（请参阅[css基本框模型](https://www.w3.org/TR/css3-box/)）。]
### 9.2.4 'display' 属性
~~~
Name: display
Value: inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initial: inline
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
Computed value: see text
~~~
该属性取值的含义如下：
***block***
该值使一个元素生成一个原始块框。
***inline-block***
此值会导致元素生成主要的行内级块容器。（内联块的内部被格式化为块框，并且该元素本身被格式化为原子内联级框。）
***inline***
该值使一个元素生成一个或多个行内框
***list-item***
该值使一个元素（如HTML中的LI）生成一个原始块框和一个列表项行内框。要了解列表和列表格式化的信息，请参见[列表](https://www.w3.org/TR/CSS22/generate.html#lists)一节。
***none***
该值导致元素不出现在[格式结构](https://www.w3.org/TR/CSS22/intro.html#formatting-structure)中（即，在可视媒体中元素不生成框并且对布局没有影响）。后代元素也不会生成任何框;该元素及其内容将完全从格式化结构中删除。通过在子代上设置['display'](https://www.w3.org/TR/CSS22/visuren.html#propdef-display)属性不能覆盖此行为。
请注意，'none'的显示不会创建隐形框;它根本不创建任何盒子。css包含一些机制，使元素能够在格式化结构中生成影响格式但不可见的框。详情请参阅有关[可见度](https://www.w3.org/TR/CSS22/visufx.html#visibility)的部分。
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
这些值会使元素表现得像表格元素一样（受到[表格](https://www.w3.org/TR/CSS22/tables.html)章节中描述的限制）。
除了定位元素和浮动元素（参见['display'，'position'和'float'之间的关系](https://www.w3.org/TR/CSS22/visuren.html#dis-pos-flo)）和根元素之外，计算值与指定值相同。对于根元素，计算值将按照'display'，'position'和'float'之间的关系部分中的描述进行更改。
请注意，尽管'display'的初始值是'inline'，但用户代理的默认样式表中的规则可能会覆盖此值。请参阅附录中的html 4样本表。
~~~
Here are some examples of the 'display' property:
p { display: block }
em { display: inline }
li { display: list-item }
img { display: none } /* Do not display images */
~~~
## 9.3定位方案
在css 2.2中，可以根据三种定位方案来布置一个盒子：
1、Normal flow。在css 2.2中，Normal flow包括块级框的块[格式化](https://www.w3.org/TR/CSS22/visuren.html#block-formatting)，行内级框的行内格式化以及块级和内联级框的[相对定位](https://www.w3.org/TR/CSS22/visuren.html#relative-positioning)。
2、Float。在浮动模型中，一个框首先根据常规流向布局，再将它从流中取出并尽可能地向左或向右偏移。内容可以排列在一个浮动的边上。
3、Absolute positioning.。在绝对定位模型中，一个盒子完全从正常流程中移除（它对后面的兄弟姐妹没有影响）并且相对于包含块分配一个位置。
如果元素是浮动的，绝对定位的或者是根元素，则称该元素为流出。如果一个元素不流出，则称该元素为流入。一个元素a的流动是由一个和所有流入元素组成的集合，其最近的流出元素是a。
### 9.3.1 选择一个定位方案：['position'](https://www.w3.org/TR/CSS22/visuren.html#propdef-position)属性
'position'和['float'](https://www.w3.org/TR/CSS22/visuren.html#propdef-float)属性决定了哪一种css 2.2定位算法被用来计算盒子的位置。
~~~
Name: position
Value: static | relative | absolute | fixed | inherit
Initial: static
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
~~~
该属性的值具有以下含义：
***static***
箱子是正常的箱子，按正常流布置。“ 'top', 'right', 'bottom', 和 'left'属性不适用。
***relative***
箱子的位置根据正常流计算（这称为正常流的位置）。那么盒子相对于其正常位置偏移。当一个箱子b相对定位时，下面的箱子的位置被计算，就好像b没有偏移一样。table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素上'position：relative'的效果还没有定义。
***absolute***
框的位置（可能还有它的尺寸）是由'left'，'right'，'top'和'bottom'属性决定。这些属性指定了基于框的包含块的偏移。绝对定位的框从常规流向中脱离。这意味着它们对其后的同胞的定位没有影响。同样的，尽管绝对定位框有边距，它们不会和其它边距发生[重合（塌缩）](https://www.w3.org/TR/CSS22/box.html#collapsing-margins)。
***fixed***
该框的位置是根据“绝对”模型计算的，但此外，该框相对于某个参考是固定的。与“绝对”模式一样，该盒子的利润率也不会随着其他利润而崩溃。在手持，投影，屏幕，tty和电视媒体类型的情况下，该框相对于视口是固定的，并且在滚动时不移动。在打印介质类型的情况下，即使通过视口看到该页面（例如在打印预览的情况下），该框也被渲染在每个页面上，并且相对于页面框被固定。对于其他媒体类型，演示文稿未定义。作者可能希望以媒体相关的方式指定“固定”。例如，作者可能希望一个框保留在屏幕上视口的顶部，但不是每个打印页面的顶部。这两个规范可以通过使用@media规则分开，如下所示：
~~~
@media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}
~~~
用户不得对固定盒的内容进行分页。请注意，用户可能会以其他方式打印隐形内容。请参阅第13章的“[页面框外的内容”](https://www.w3.org/TR/CSS22/page.html#outside-page-box)。
用户代理可能将位置视为根元素上的“静态”。
### 9.3.2 控制框偏移：'top'，'right'，'bottom'，'left'
如果某个元素的'position'属性的值不是'static'，则该元素被定位。定位元素生成定位框，根据四个属性进行布局：
~~~
Name: top
Value: <length> | <percentage> | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: refer to height of containing block
Media: visual
Computed value: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.
~~~
此属性指定绝对定位的框的上边距离框的[包含块](https://www.w3.org/TR/CSS22/visuren.html#containing-block)的上边缘的偏移量。对于[相对定位](https://www.w3.org/TR/CSS22/visuren.html#absolutely-positioned)的盒子，偏移是相对于盒子本身的顶部边缘的（即，盒子在正常流动中被赋予一个位置，然后根据这些属性从该位置偏移）。
~~~
Name: right
Value: <length> | <percentage> | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: refer to width of containing block
Media: visual
Computed value: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.
~~~
像'顶部'一样，但是指定了一个盒子的右边缘与盒子的包含块的右边缘的左边偏移的距离。对于相对定位的盒子，偏移是相对于盒子的右边缘本身。
~~~
Name: bottom
Value: <length> | <percentage> | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: refer to height of containing block
Media: visual
Computed value: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.
~~~
像'顶部'，但是指定了盒子的底部边缘边缘在盒子的包含块的底部上方偏移的距离。对于相对定位的盒子，偏移是相对于盒子的底部边缘本身。
~~~
Name: left
Value: <length> | <percentage> | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: refer to width of containing block
Media: visual
Computed value: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.
~~~
像'top'一样，但是指定了一个盒子的左边界边缘在盒子的包含块的左边缘的右边偏移的距离。对于相对定位的盒子，偏移是相对于盒子的左边缘本身。
这四个属性的值具有以下含义：
[length](https://www.w3.org/TR/CSS22/syndata.html#value-def-length)
偏移量是距参考边缘的固定距离。负值是允许的。
[percentage](https://www.w3.org/TR/CSS22/syndata.html#value-def-percentage)
偏移量是包含块宽度（'左'或'右'）或高度（'顶部'和'底部'）的百分比。负值是允许的。
auto
对于非替换元素，此值的效果取决于哪些相关属性的值为'auto'。有关详细信息，请参阅绝对定位的非替换元素的宽度和高度部分。对于替换元素，此值的效果仅取决于替换内容的内在尺寸。有关详细信息，请参阅绝对定位的替换元素的宽度和高度部分。
## 9.4 Normal flow
正常流 程中的框属于一个格式化上下文，它在css 2.2中可能是表格，块或内联格式。在未来的CSS级别中，将引入其他类型的格式化上下文。块级框参与块格式化上下文。内联级别的框参与内联格式化上下文。表格格式的上下文在表格的章节中描述。
### 9.4.1块格式化上下文
浮动，绝对定位的元素，块容器（如嵌入块，表格单元和表格标题）不是块框，以及具有“visible”以外的“overflow”的块框（除了该值已传播到视口）为其内容建立新的块格式上下文。
在块格式上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟箱之间的垂直距离由“边距”属性决定。块格式化上下文中相邻块级别框之间的垂直边距[折叠](https://www.w3.org/TR/CSS22/box.html#collapsing-margins)。
在块格式化上下文中，每个框的左外边缘都与包含块的左边缘接触（用于从右到左格式化，右边缘接触）。即使在漂浮物存在的情况下（尽管箱子的线框可能由于浮动物而收缩），这是真实的，除非箱子建立了新的块格式上下文（在这种情况下箱子本身可能由于漂浮物而[变窄](https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float)）。
有关分页媒体中分页符的信息，请参阅[允许分页符](https://www.w3.org/TR/CSS22/page.html#allowed-page-breaks)的章节。
### 9.4.2内联格式化上下文
内联格式化上下文由不包含块级框的块容器框建立。在内联格式上下文中，框从一个包含块的顶部开始一个接一个地水平放置。水平边距，边框和填充在这些框之间受到尊重。盒子可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者它们内部的文本的基线可以对齐。包含形成线条框的矩形区域称为线框。
线框的宽度由[包含块](https://www.w3.org/TR/CSS22/visuren.html#containing-block)和浮动的存在决定。线框的高度由线高度计算部分中的[规则](https://www.w3.org/TR/CSS22/visudet.html#line-height)确定。
一个线框对于它包含的所有盒子来说总是足够高。但是，它可能比它包含的最高的盒子高（例如，如果盒子是对齐的，以便基线对齐）。当box b的高度小于包含它的line box的高度时，line box中的b的垂直对齐由['vertical-align'](https://www.w3.org/TR/CSS22/visudet.html#propdef-vertical-align)属性确定。当几个内嵌级别的盒子不能在一个行盒子内水平安装时，它们分布在两个或更多个垂直堆叠的行盒子中。因此，一个段落是一个垂直的线框堆栈。线盒堆叠在一起，没有垂直分隔（除了在其他地方指定），它们从不重叠。
通常情况下，线框的左边缘触及其包含块的左边缘，右边缘触及其包含块的右边缘。但是，浮动框可能会出现在包含块边缘和线框边缘之间。因此，虽然同一行内格式化上下文中的行框通常具有相同的宽度（包含块的宽度），但如果可用水平空间由于浮动而减少，它们的宽度可能会有所不同。相同内联格式化上下文中的线框一般高度不同（例如，一行可能包含高图像，而其他行仅包含文本）。
当一行上内联级别框的总宽度小于包含它们的行内框的宽度时，行框内的水平分布由'text-align'属性确定。如果该属性的值为“证明”，则用户代理也可以拉伸内联框中的空格和单词（但不包括内嵌表格和内嵌块框）。
当内联框超出线框的宽度时，它将被拆分成几个框，并且这些框分布在多个线框中。如果内联框不能被分割（例如，如果内联框包含单个字符，或者特定语言的单词中断规则在内联框中不允许中断，或者内联框受到nowrap或pre的空白值的影响），然后内联框溢出线框。
当内联框被分割时，边距，边框和内边距在发生分割时（或者在有多个分割时）没有视觉效果。
由于[双向文本](https://www.w3.org/TR/CSS22/visuren.html#direction)处理，内联框也可能在同一个线框内被分成几个框。
行框是根据需要创建的，以在内联格式上下文中保存内联级内容。不包含文本，没有保留的空白区域，没有边距不为零，填充或边框的内联元素，也没有其他流内容（如图像，内联块或内联表），并且不以为了确定其中任何元素的位置，必须将保存的换行符视为零高度线框，并且必须将其视为不存在用于任何其他目的。
~~~
这里是内联框架构建的一个例子。下面的段落（由html块级元素p创建）包含散布在元素em和strong中的匿名文本：
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>
The P element generates a block box that contains five inline boxes, three of which are anonymous:
Anonymous: "Several"
EM: "emphasized words"
Anonymous: "appear"
STRONG: "in this"
Anonymous: "sentence, dear."
为了格式化段落，用户代理将五个框放入线框中。在此示例中，为p元素生成的框为线框创建了包含块。如果包含块足够宽，则所有内联框将放入单个线框中：
亲爱的，这句话中出现了几个强调的单词。如果没有，内联框将被分割并分布在多个线框中。上一段可能分为以下几部分：
Several emphasized words appear
in this sentence, dear.
or like this:
Several emphasized
words appear in this
sentence, dear.
~~~
在前面的例子中，em盒被分成两个em盒子（称之为“split1”和“split2”）。边距，边框，填充或文字装饰在split1或split2之前没有可见的效果。
~~~
Consider the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Example of inline flow on several lines</TITLE>
<STYLE type="text/css">
EM {
padding: 2px;
margin: 1em;
border-width: medium;
border-style: dashed;
line-height: 2.4em;
}
</STYLE>
</HEAD>
<BODY>
<P>Several <EM>emphasized words</EM> appear here.</P>
</BODY>
</HTML>
Depending on the width of the P, the boxes may be distributed as follows:
~~~
* 在“强调”之前和“文字”之后插入边距。
* 在“强调”之前，之上和之下以及之后，之上，之下插入填充。在每种情况下，在三面呈现虚线边框。
### 9.4.3相对定位
一旦盒子按照[正常流](https://www.w3.org/TR/CSS22/visuren.html#normal-flow)布置或浮动，它可以相对于这个位置移动。这被称为相对定位。以这种方式偏移一个方框（b1）对后面的方框（b2）没有影响：b2给出一个位置，就好像b1没有偏移并且在应用了b1的偏移之后b2不被重新定位。这意味着相对定位可能会导致框重叠。但是，如果相对定位导致“overflow：auto”或“overflow：scroll”框溢出，则ua必须允许用户访问此内容（在其偏移位置），该内容通过创建滚动条可能会影响布局。
相对定位的盒子保持其正常的流量大小，包括换行符和原先为其保留的空间。关于包含块的部分解释了当相对定位的盒子建立新的包含块时。
对于相对定位的元素，“left”和“right”水平移动框，而不改变其大小。'left'将框移动到右侧，'right'将它们移动到左侧。由于“left”或“right”结果框未被分割或拉伸，因此使用的值始终为：left = -right。
If both 'left' and 'right' are 'auto' (their initial values), the used values are '0' (i.e., the boxes stay in their original position).
If 'left' is 'auto', its used value is minus the value of 'right' (i.e., the boxes move to the left by the value of 'right').
If 'right' is specified as 'auto', its used value is minus the value of 'left'.
If neither 'left' nor 'right' is 'auto', the position is over-constrained, and one of them has to be ignored. If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes -'left'. If 'direction' of the containing block is 'rtl', 'right' wins and 'left' is ignored.
~~~
例。以下三条规则是等价的：
div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }
~~~
'top'和'bottom'属性将相对定位的元素向上或向下移动而不改变其大小。“top”将框移开，“bottom”移动框。由于“top”或“bottom”的结果，框未被分割或拉伸，因此使用的值始终为：top = -bottom。如果两者都是'自动'，他们使用的值都是'0'。如果其中一个是“自动”，它就成为另一个的负面因素。如果两者都不是'自动'，则忽略'bottom'（即'底部'的使用值将减去'top'的值）。
在[比较正常流，浮球和绝对定位](https://www.w3.org/TR/CSS22/visuren.html#comparison)的章节中提供了相对定位的示例。
## 9.5 Floats
float是一个在当前行上左移或右移的框。浮动（或“浮动”或“浮动”框）最有趣的特征是内容可能沿着其侧面流动（或者被“清除”属性禁止这样做）。内容沿着左浮动框的右侧向下流动，并沿右浮动框的左侧向下流动。以下是浮动定位和内容流的介绍;关于浮动行为的确切规则在'浮动'属性的描述中给出。
浮动的盒子向左或向右移动，直到其外边缘接触容纳块边缘或另一个浮子的外边缘。如果存在线框，则浮动框的外部顶部与当前线框的顶部对齐。
如果浮子没有足够的水平空间，它会向下移动，直到它适合或不再有浮子出现。
由于浮动不在流中，所以在浮动框之前和之后创建的未定位块框垂直流动，就好像浮动不存在一样。然而，根据需要缩短在浮体旁边创建的当前和随后的线框以腾出浮标的边距框。
当存在满足所有这四个条件的垂直位置时，线框位于浮标旁边：（a）在线框顶部或以下，（b）在线框底部或上方，（c））在浮体的上边缘下方，以及（d）在浮体的下边缘上方。
如果缩短的线框太小而不能包含任何内容，则线框向下移动（并重新计算其宽度），直到某些内容适合或不存在更多浮动内容。浮动框之前的当前行中的任何内容都会在浮动框另一侧的同一行中重新排列。换句话说，如果在遇到左浮动符合剩余线框空间之前将内联框放在线上，则将左浮动线放置在该线上，与线框顶部对齐，然后线上已有的内联框相应地移动到浮动右侧（右侧是左侧浮动的另一侧），反之亦然，用于rtl和右侧浮动。
表格，块级替换元素或正常流程中用于建立新块格式上下文的元素（例如“可见”以外的“溢出”元素）的边框，不得与与元素本身在同一个块格式上下文中浮动。如果需要的话，实施应该通过将其放置在任何前面的浮体下方来清除所述元素，但是如果有足够的空间，可以将其放置在这样的浮体附近。他们甚至可能使该元素的边框比[第10.3.3节](https://www.w3.org/TR/CSS22/visudet.html#blockwidth)定义的窄。css2没有定义何时ua可以将所述元素放置在浮体旁边或者所述元素可能变得更窄。
~~~
例。在下面的文档片段中，包含块太窄而不能包含浮动旁边的内容，因此根据text-align属性将内容移动到线框中对齐的浮动下方。
p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }
...
<p>
<span> </span>
Supercalifragilisticexpialidocious
</p>
This fragment might look like this:
~~~
几个浮标可能相邻，并且此模型也适用于相同行中的相邻浮标。
~~~
下面的规则浮动了左边所有带有class =“icon”的img框（并将左边距设置为'0'）：
img.icon {
float: left;
margin-left: 0;
}
考虑下面的html源代码和样式表：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Float example</TITLE>
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
</HEAD>
<BODY>
<P><IMG src=img.png alt="This image will illustrate floats">
Some sample text that has no other...
</BODY>
</HTML>
img盒子漂浮在左边。随后的内容格式化为浮点数的右边，从浮点数开始。由于浮球的存在，浮球右侧的线框缩短，但在浮球后恢复其“正常”宽度（由p单元建立的包含框的宽度）。本文档可能被格式化为：
~~~
~~~
如果文档是以下格式，格式将完全相同：
<BODY>
<P>Some sample text
<IMG src=img.png alt="This image will illustrate floats">
that has no other...
</BODY>
因为浮子左侧的内容被浮子取代，并向右回流。
~~~
如[8.3.1节](https://www.w3.org/TR/CSS22/box.html#collapsing-margins)所述，浮动边框的边距不会因相邻边框的边距而折叠。因此，在前面的示例中，纵向边距不会在p箱和浮动的img箱之间[折叠](https://www.w3.org/TR/CSS22/box.html#collapsing-margins)。
浮动内容就像浮动产生新的堆叠上下文一样堆叠，除了实际上创建新的堆叠上下文的任何定位元素和元素都参与浮动的父级堆叠上下文。浮标可以在正常流程中与其他框重叠（例如，当浮标旁边的正常流动框具有负边界时）。当发生这种情况时，浮动将呈现在未定位的流入块前面，但在流入内联后面。
这里是另一个例子，展示了当float与正常流中元素的边界重叠时会发生什么。
以下示例说明了如何使用'clear'属性来防止内容在浮动点旁边流动。
假设一个这样的规则：p {clear：left}格式可能如下所示：
### 9.5.1定位float：'float'属性
~~~
Name: float
Value: left | right | none | inherit
Initial: none
Applies to: all, but see 9.7
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
~~~
这个属性指定一个盒子是应该漂浮在左边，右边还是根本不漂浮。它可以被设置为任何元素，但仅适用于生成未被绝对定位的框的元素。该属性的值具有以下含义：
