# 可視化格式模型
> 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
~~~
這個屬性指定一個盒子是應該漂浮在左邊，右邊還是根本不漂浮。它可以被設置為任何元素，但僅適用于生成未被絕對定位的框的元素。該屬性的值具有以下含義：
