摘要：盒的類型會影響其在視覺格式化模型中的表現。浮動元素絕對定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內。

URL：http://www.w3.org/TR/CSS2/visuren.html
Translator: HaoyCn 
Date: 14th of Aug, 2015

本文并未全部翻譯，譯者在原文基礎上稍有添加圖示。如了解全部信息，請參看規范原版。個人水平有限，歡迎指正。

本章和下章用于描述視覺格式化模型：用戶代理 User Agent 如何在視覺媒體 Visual Media 下處理文檔樹 Document Tree 。

視覺格式化模型中，文檔樹中的每一個元素根據盒模型 Box Model 產生零個或多個盒。這些盒的布局由以下內容控制：

盒的尺寸和類型

定位體系 Positioning Scheme （常規流，浮動和絕對定位）

文檔樹中元素之間的關系

外部信息（如：視口大小，圖片的固有尺寸等）

本章及下章定義的屬性適用于連續媒體和頁面媒體 Paged Media 。然而，外邊距屬性的意義在頁面媒體中有所不同（詳情見頁面模型）。

視覺格式化模型沒有指定格式化的所有方面（如，沒有指定字符間距算法）。本規范沒有覆蓋到的格式化問題上，符合規范的用戶代理也可能表現不一。

在連續媒體 Continuous Media 上工作的用戶代理一般會向用戶提供一個視口（屏幕上的一個窗口或其它可視區域）來幫助用戶訪問文檔。用戶代理可以在調整視口大小的同時改變文檔的布局（見初始包含塊 Initial Containing Block ）。

如果視口小于渲染文檔的畫布區域，用戶代理應提供一個滾動機制。每個畫布最多有一個視口，但用戶代理可以把文檔渲染到多個畫布上（即為相同文檔提供不同視圖）。

CSS2.1中，許多盒的定位和大小都根據一個名為包含塊 Containing Block 的矩形盒的邊緣來計算。一般地，生成的盒會充當其后代盒的包含塊；我們稱盒為其后代“創建”了包含塊。說“盒的包含塊”即是說“盒所處的包含塊”，而不是盒所產生的包含塊。

每個盒會被賦予一個相對于其包含塊的位置，但它不會被局限在其包含塊內；它有可能溢出。

包含塊的尺寸如何計算的細節將在下章講述。

本節描述CSS2.1中可生成的盒類型。盒的類型會影響其在視覺格式化模型中的表現。下面描述的 display 屬性用來指定盒的類型。

塊級元素是源文檔中會被視覺格式化為塊狀（例：段落）的元素。 display 屬性的以下值會讓一個元素成為塊級元素： block 、 list-item 以及 table 。

塊級盒 Block-level Boxes 是參與塊格式化上下文 Block Formatting Context 的盒。每個塊級元素生成一個主要的塊級盒 Principal Block-level Box 來包含其后代盒和生成的內容，同時參與定位體系 Positioning Scheme 。某些塊級元素還會在主要盒之外產生額外的盒： list-item 元素。這些額外的盒會相對于主要盒來擺放。

除了（下章要講的）表格盒 Table Boxes ，和可替換元素（ Replaced Elements ），一個塊級盒同時也是一個塊容器盒 Block Container Box ，一個塊容器盒要么只包含塊級盒，要么創建一個行內格式化上下文 Inline Formatting Context 并只包含行內級盒 Inline-level Boxes 。并非所有的塊容器盒都是塊級盒：不可替換的行內塊 Bon-replaced Inline Blocks 和不可替換的表格單元格 Non-replaced Table Cells 也是塊容器但不是塊級盒。是塊級盒、同時也是塊容器的盒稱作塊盒 Block Boxes 。

這三個術語，“塊級盒”、“塊容器盒”、“塊盒”在意義明確時可簡稱為“塊”。

9.2.1.1 匿名塊盒

在一個如下文檔中：

   Some text
   
More text

（假定 div 和 p 都設置了 display: block ，） div 看起來似乎同時包含了行內類型的內容和塊類型的內容。為了使界定格式化簡單一些，我們假定有一個匿名塊盒 Anonymous Block Box 圍繞在“Some text”周圍。

該例如圖所示，有三個盒，其中一個為匿名盒。

換句話說：如果一個塊容器盒（如上例中為 div 生成的盒）內有一個塊級盒（如上例中的 p ），那么我們強制它只包含塊級盒。

當一個行內盒 inline box 包含一個文檔流內 In-flow 的塊級盒，這個行內盒（及在同一行盒的 Line Box 它的行內祖先）會在該塊級盒（及其連續的或者中間只被可折疊空白、脫離文檔流元素分隔的塊級同胞）的周圍打斷，把行內盒分離成兩個盒（甚至一邊為空也如此），各在塊級盒一邊。在打斷之前和打斷之后的行盒 Line Box 都被匿名塊盒包含，并且該塊級盒成為匿名塊盒的同胞。當這樣的行內盒受到相對定位影響，任何產生的移動同樣影響到包含在其中的塊級盒。

該模型將應用在下面的例子中。假設有規則如下:

p    { display: inline }
span { display: block } 

被應用到如下HTML文檔:

   

      This is anonymous text before the SPAN。
      This is the content of SPAN.
      This is anonymous text after the SPAN。
   

p 元素包含一段匿名文本 C1 ，接著是一個塊級元素，隨后又是另一段匿名文本 C2 。結果生成了一個代表 body 的塊盒，它包含了圍繞 C1 一個匿名塊盒、 span 的塊盒，和圍繞 C2 的另一個匿名塊盒。

匿名盒的繼承屬性會從包含它的非匿名盒那里繼承（比如，在子節標題“匿名塊盒”下的那個例子中的 div 盒）。匿名盒的非繼承屬性將取其初始值。例如，匿名盒的字體屬性繼承自 div ，但是外邊距是 0 。

當一個元素導致了匿名塊盒的生成，則該元素上設置的屬性一樣能應用于該元素生成的盒和該元素的內容。例如，在上面例子中，如果在 p 元素上設置了邊框，則這個邊框將畫在 C1 （在行的結尾開）和 C2 （在行的結尾閉）周圍。

一些用戶代理用其它方式實現了行內包含塊 Inlines Containing Blocks 上的邊框。例如，將其內嵌的塊放入“匿名行盒”中，并在這些匿名行盒周圍繪出行內邊框。由于CSS1和CSS2沒有定義這種表現，僅支持CSS1或CSS2的用戶代理才會以其它形式來實現，并仍聲稱遵守這部分CSS2.1規范。對于CSS2.1規范發布之后的用戶代理不會這么做。

IE6下的效果：

計算百分比值時，應忽略匿名塊盒，而以最近的非匿名祖先盒來替代。例如，上面的 div 里，如果一個匿名塊盒的子盒在需要知道其包含塊的高度來獲得一個百分比高度。那么它將使用 div 形成的包含塊的高度，而不是匿名塊盒的高度。

行內級元素是在源文檔中那些不為其內容形成新的塊、其內容分布在多行中的元素（如，段落內著重文本，行內圖片等等)。以下的 display 屬性值產生一個行內級元素： inline ， inline-table ，以及 inline-block 。行內級元素生成行內級盒 Inline-level Boxes ，而這些盒會參與行內格式化上下文 Inline Formatting Context 。

一個行內盒是行內級盒，且其內容參與了該行內盒的行內格式化上下文。一個 display 值是 inline 的不可替換元素會生成一個行內盒。那些不是行內盒的行內級盒（例如可替換的行內級元素 Replaced Inline-level Elements 、行內塊元素 inline-block 、行內表格元素 inline-table ）被稱為原子行內級盒 Atomic Inline-level Boxes ，因為它們以單一不透明盒的形式來參與它們的行內格式化上下文。

9.2.2.1 匿名行內盒 Anonymous Inline Boxes

任何被直接包含在一個塊容器元素（不是包含在行內元素）的文本必須作為匿名行內元素來對待。

一個HTML文檔如下：

Some emphasized text

p 產生一個塊盒，其中包含了一些行內盒。 emphasized 的盒是一個由行內元素 em 生成的行內盒，但其他盒（ some 和 text 的）是由塊級元素 p 生成的行內盒。后面這種盒被稱作匿名行內盒，因為它們沒有相關的行內級元素。

這些匿名行內盒的可繼承屬性將從它們的父級塊盒中繼承。非繼承性屬性取其初始值。在上面例子中，匿名行內盒的 color 從 p 那里繼承，但 background 為 transparent 。

空白內容，根據 white-space 屬性，如果可被折疊則不會產生任何匿名行內盒。

本規范中，如果可根據上下文來清晰界定一個匿名盒的類型，則匿名行內盒和匿名塊盒都可被簡稱為匿名盒。

在格式化表格時，還會有更多類型的匿名盒出現。

為使章節號同之前的草案一致，特保留此節。 display: run-in 現已定義至CSS3（參見CSS基本盒模型）。

（譯者注：本處暫只記錄常見幾個值的簡略介紹）

block 元素產生一個塊盒。

inline-block 元素產生一個行內級塊容器。行內塊的內部會被當作塊盒來格式化，而此元素本身會被當作原子行內級盒來格式化。

inline 元素產生一個或多個的行內框。

none 元素不出現在格式化結構中（也就是說，在視覺媒體中元素既不產生盒也不影響布局）。其后代元素也不產生任何盒：該元素及其內容會被從格式化結構中完全移除。對后代元素設定 display 屬性不能覆蓋這個表現。

請注意 none 值不產生可見盒；它根本就不生成盒。CSS中有使元素在格式化結構中產生盒并影響格式化，但盒本身不可見的機制。請訪問visibility的章節了解詳情。

除定位元素和浮動元素以及根元素外（見下文）計算值與指定值相同。根元素的計算值按下文所述改變。

注意，盡管 display 初始值是 inline ，但用戶代理的默認樣式表規則可能覆蓋該值。請見附錄中的HTML4參考樣式表。

在CSS2.1中，盒子根據以下三種體系來布局：

常規流 Normal Flow 。CSS2.1中，常規流包括塊級盒的塊格式化，行內盒的行內格式化，以及塊級盒和行內級盒的相對定位。

浮動 Floats 。在浮動模型中，盒首先根據常規流布局，然后從常規流中脫離并盡可能地向左或向右位移。內容可以布局在浮動周圍。

絕對定位 Absolutr Positioning 。在絕對定位模型中，盒完全從常規流中脫離（對后面的同胞元素無影響）并根據包含塊來分配位置。

浮動元素、絕對定位元素、根元素都被稱為脫離文檔流 Out of Flow ；其他元素被稱為文檔流內 In-flow 。元素 A 的排版流由 A 、在文檔流內且最近的脫離文檔流的祖先是A的元素構成。

（譯者注：本節翻譯有省略）

static：盒為常規盒，根據常規流布局， top 、 right 、 bottom 、 left 屬性不生效。

relative：盒的定位根據常規流計算（盒被成為常規流內定位）。接著盒相對其常規位置移動。當B盒相對定位，B盒之后的盒定位時就當B沒有移動一樣來計算。 table-row-group 、 table-header-group 、 table-footer-group 、 table-row 、 table-column-group 、 table-column 、 table-cell 以及 table-caption 上次未定義此效果。

absolute：盒的位置（還可能包括大小）由 top 、 right 、 bottom 、 left 屬性指定。這些屬性根據盒的包含塊來規定移動。絕對定位盒脫離文檔流。這意味著它們對之后的同胞盒的布局沒有影響。同時，即便絕對定位盒有外邊距，也不同其他任何外邊距折疊。

fixed：盒的定位根據 absolute 模型來計算，但除此之外，盒相對某些參照物保持固定。和 absolute 模型一樣，此盒的外邊距也不同其他任何外邊距折疊。在手持 handheld 、投影 projection 、屏幕 screen 、打字機 tty 、電視 tv 媒體類型中，盒相對視口固定且滾動時不會移動。在打印媒體類型中，即便頁面是通過視口來訪問的（比如打印預覽），盒也渲染在所有頁，并且根據頁盒固定。其他媒體類型中則未定義此表現。開發者可根據依賴媒體來指定 fixed 。比如說，如果想使盒固定在屏幕視口頂部，但不出現在打印頁的頂部，這兩種設定可以通過使用@media規則來分開，如下：

@media screen { 
   h1#first { position: fixed } 
}
@media print { 
   h1#first { position: static }
}

用戶代理不可將固定盒的內容分頁顯示。注意用戶代理可能用其他方法打印不可見內容。參見第13章“頁盒外的內容”。

用戶代理可將根元素上的 position 視為 static 。

（譯者注：本節暫略，可參考CSS手冊）

常規流中的盒子都屬于某個格式化上下文，要么塊格式化上下文，要么行內格式化上下文，總之不能二者得兼。塊級盒參與塊格式化上下文，行內級盒參與行內格式化上下文。

浮動、絕對定位元素、非塊盒的塊容器（如：行內塊 inline-block 、表格單元格 table-cell 以及表格標題 table-caption ）以及 overflow 屬性不為 visible 的塊盒（除了該值被傳播到視口的情況）將為其內容創建一個新的塊級格式化上下文。

在塊格式化上下文中，盒從包含塊頂部一個接一個地垂直擺放。兩個同胞盒間的垂直距離取決于 margin 屬性。同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將折疊。

在塊格式化上下文中，每個盒的左外邊緣緊貼包含塊的左邊緣（從右到左的格式里，則為盒右外邊緣緊貼包含塊右邊緣），甚至有浮動也是如此（盡管盒里的行盒可能由于浮動而收縮），除非盒創建了一個新的塊格式化上下文（在這種情況下盒子本身可能由于浮動而變窄）。

關于在頁面媒體 Paged Media 中分頁的信息，請參考允許頁面分頁的章節。

在行內格式化上下文中，盒從包含塊的頂部一個接一個地水平擺放。盒水平方向的外邊距、邊框和內邊距在布局時都會考慮在內。盒的垂直對齊方式則不一：可能按底部或者頂部對齊，又或者按它們內容文本的基線對齊。包含了一行里所有盒的矩形區域被稱為行盒 Line Box 。

行盒的寬度取決于包含塊以及浮動。行盒的高度取決于在行盒高度計算章節所給出的規則。

行盒的高總是足以容納其包含的所有盒。然而，它可能高于其所包含的最高盒（比如，包含的盒以基線對齊）。當一個盒（ B ）的高度小于包含它的行盒的高度時， B 的垂直對齊方式由 vertical-align 屬性決定。當在水平方向上幾個行內級盒不能完全被單個行盒包含時，它們會被分配到兩個或者多個垂直擺放的行盒中。因此，一個段落就是多個行盒的垂直堆疊。行盒的堆疊沒有垂直間距（除非有特別聲明）并且從不重疊。

一般來說，行盒的左邊緣緊貼其包含塊的左邊緣，其右邊緣緊貼包含塊的右邊緣。然而，浮動盒可能被置于包含塊和行盒邊緣之間。因此，盡管在同一行內格式化上下文中的行盒是等寬的（包含塊的寬度），由于浮動會造成可用的水平空間減少，行盒的寬度仍可能變動。同一行內格式化上下文中的行盒在高度上通常是變動的（比如，一行可能包含圖片但其他行僅包含文本）。

當一行中的行內級盒的總寬度小于包含它們的包含塊的時候，它們在行里的水平分布取決于 text-align 屬性。如果取 justify 值，用戶代理可能拉伸行內盒（ inline-table 和 inline-block 盒除外）中的空格和字間距。

當行內盒的寬度超過行盒寬度時，行內盒將被分為多個盒，被分解出的盒則又分布在多個行盒中。如果一個行內盒不可切割（比如，行內盒包含的是單個字符或者語言指定的斷字規則不允許斷字，又或者行內盒的 white-space 屬性值為 nowrap 或 pre ），那么該行內盒將溢出行盒。

當行內盒被分割，外邊距、邊框和內邊距在任何斷點處都不會產生視覺影響。

行內盒也可能由于雙向文本處理而在一個行盒內被切割成多個盒。

為了包含行內格式化上下文中的行內級內容，行盒按需創建。有的行盒不包含文本、保留空白、外邊距或內邊距或邊框不為零的行內元素、其他文檔流內 In-flow 內容（如圖片、行內塊或行內表格），并且不以保留的換行符結尾，如果是為決定它們所包含的元素的定位，則必須視其為零高度的行盒，除此之外的其他目的下應視其為不存在。

下面是一個行內盒構造的例子。下屬的段落（由HTML塊級元素 p 創建）包含了有 em 和 strong 交叉的匿名文本。

Several emphasized words appear
in this sentence, dear.

p 元素生成了一個塊盒來包含五個行內盒，其中三個行內盒是匿名的：

匿名："Several"

em："emphasized words"

匿名："appear"

strong："in this"

匿名："sentence, dear."

為了格式化該段落，客戶端將五個行內盒放進行盒。在這個例子中，由 p 元素生成的盒創建了行盒的包含塊。如果該包含塊足夠寬，所有的行內盒將放置在單個行盒：

Several emphasized words appear in this sentence, dear.

如果寬度不夠，行內盒就會被分割并分布在多個行盒。段落可能就變成了：

Several emphasized words appear

in this sentence, dear.

或者：

Several emphasized

words appear in this

sentence, dear.

在最后這個情況里， em 盒被分割成了兩個 em 盒（現稱之為 split1 和 split2 ）。外邊距、邊框、內邊距或者文本修飾在 split1 之前或者 split2 之后都沒有視覺效果。

看下面這個例子：

Several emphasized words appear here.

根據 p 的寬度，這些盒可能分布如下：

外邊距插在了 emphasized 之前和 words 之后

內邊距被插在了 emphasized 之前、上、下， words 值后、上、下。虛線邊框渲染在了每個單詞的三邊。

一旦一個盒遵循常規流或者浮動而布局好位置后，它有可能根據這個位置來相對位移。這被稱作相對定位。通過這種方式移動盒（ B1 ）對隨后的盒（ B2 ）沒有影響： B2 被賦予了一個如同 B1 沒有位移的位置，并且 B2 在 B1 移動后不會重定位。這意味著相對定位可能造成盒重疊。然而，如果相對定位造成一個 overflow:auto 或 overflow:scroll 的盒溢出，客戶端必須通過創建滾動條來讓用戶可以訪問到該內容（在其偏移位置），這可能影響布局。

一個相對定位盒保持其常規流中的大小，包括斷行和原本為其保留的空間。包含塊一節解釋了相對定位盒創建新的包含塊的情況。

對于相對定位元素而言， left 和 right 在不改變盒大小的同時使其水平位移。 left 使盒向右移動， right 時期向左。 left 或 right 沒有造成盒的分割或拉伸，因此應用的值始終滿足： left = - right 。

如果 left 和 right 值均為 auto （其默認值），應用的值為 0 （即是說，盒保持在其原位）。

如果 left 是 auto ，其應用值為 right 的負值（即盒向左移動 right 值）。

如果 right 是 auto ，其應用值為 left 的負值。

如果 left 和 right 均不為 auto ，定位則被過度約束，其中一值必須被忽略。如果包含塊的 direction 屬性值為 ltr ，則 left 值勝出而 right 值改為 - left 。如果包含塊的 direction 屬性值為 rtl ， right 值勝出而 left 值被忽略。

舉例。下面三條樣式規則是等效的。

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 。如果二者均為 auto ，其值則均為 0 。如果其中一個值為 auto ，則該屬性取另一屬性的負值。如果二者均不為 auto ， bottom 將被忽略（也就是說， bottom 應用值為 top 的負值）。

注：在腳本環境中動態移動相對定位盒可以產生動畫效果（見 visibility 屬性）。盡管相對定位可被用于上標和下標效果，但行高在自動調整時不會將其定位納入計算。參見行高計算一節的描述了解更多信息。

相對定位的例子將在對比常規流、浮動和相對定位一節中提供。

在當前行中一個盒被移動到左側或右側稱為浮動。浮動最有趣的特點是內容可以布局在其旁邊（或者為 clear 屬性所禁止）。內容會布局在左浮動盒的右側，或布局在右浮動盒的左側。下述內容是對浮動定位及內容布局的介紹。控制浮動行為的準則已經在 float 屬性一節中描述。

浮動盒將被移動至左側或右側直至其外側緊貼包含盒的邊緣或另外一個浮動的外邊緣。如果存在行盒，浮動盒的頂部外邊緣將與行盒的頂部對齊。

如果水平方向沒有足夠的空間容納浮動，它將下移直至能夠放下它或者沒有其他浮動。

由于浮動不在常規流中，在浮動之前或之后創建的非定位塊盒將垂直擺放，如同浮動不存在一樣。然而，當前行盒和隨浮動后創建的行盒會按需縮短來為浮動的外邊距盒騰出空間。

當有一個垂直定位滿足以下全部四個條件時，行盒將緊挨著浮動：

在行盒頂部或之下

在行盒底部或之上

在浮動的上外邊距邊緣之下，并

在浮動下外邊距邊緣之上

注：這意味著總高度 Outer Height 為零或為負的浮動不會縮短行盒。

如果行盒被縮短到不能容納任何內容，那么行盒將下移（其寬度會重新計算）直到可以容納內容或不再有浮動。當前行中，任何在浮動盒之前的內容將移動到同一行中的浮動的另一側重新布局。換句話說，如果行內級盒先于左浮動被放在行盒中，而行盒的剩余空間可以容納左浮動，那么左浮動會被置于該行內，且與行盒頂部對齊，而已經放入該行盒的行內級盒會被相應地移動到浮動的右側（右側即是左浮動的另一側），反過來對 rtl 和右浮動也是這樣。

表格、塊級可替換元素或者在常規流中創建新的塊格式化上下文的元素（如 overflow 值非 visibile 的元素），它們的邊框盒不可與它們同屬一個塊格式化上下文中的浮動元素的外邊距盒重疊。如果有必要的話，應當通過把它們置于已出現的浮動的后面達到清除浮動的效果，但如果空間足夠，可以將其放置在浮動旁邊。但這可能使得該元素的框盒變得比10.3.3章節定義的還要窄。CSS2沒有定義用戶代理何時可以把元素置于浮動旁的情況，也沒有定義元素會變得多窄的情況。

舉例。在下面的文檔片段中，包含塊不足以容納浮動旁邊的內容，因此內容需要移動到浮動下面，并根據其 text-align 屬性來在行盒中定位。

p {
   width: 10em;
   border: solid aqua;
}
span {
   float: left;
   width: 5em;
   height: 5em;
   border: solid blue;
}


    
   Supercalifragilisticexpialidocious

該片段可能如下圖所示：

浮動可以并列，而這個模型也適用于同一行中的并列浮動元素。

下面的規則會使所有的 class="icon" 的 img 盒浮動到左側（并設左外邊距為 0 ）。

img.icon { 
   float: left;
   margin-left: 0;
}

考慮如下HTML代碼和樣式表：

   

   Some sample text that has no other...

img 盒左浮動。其后的內容被格式化到浮動的右側，從浮動所在的同一行開始布局。挨著浮動的行盒由于浮動之故縮短，但浮動之后就恢復了它們“正常”寬度（即 p 元素創建的包含塊之寬）。該文檔格式化如下：

如果文檔如下，格式化的結果是一樣的：

   
Some sample text 
   
   that has no other...

這是因為浮動左側的內容為浮動所替代，并被重新布局在了浮動的右側。

正如8.3.1節開頭所言，浮動元素的外邊距不會同相鄰盒的外邊距折疊。因此，在之前的例子中， p 盒和 img 浮動盒的垂直外邊距不會折疊。

浮動的內容會像浮動創建了新的堆疊上下文 Stacking Context 一樣堆疊起來，但定位元素、創建了新的堆疊上下文并參與了浮動的父級堆疊上下文并的元素除外。浮動可以同常規流中的其他盒重疊（比如，浮動旁邊的常規流盒有負外邊距的時候）。當發生重疊時，浮動會被渲染在非定位文檔流內塊 Non-positioned In-flow Blocks 之上，文檔流內行內盒之下。

這有個例子，演示了浮動與常規流中元素的邊框重疊的情況。

浮動圖片擋住了與其重疊的塊盒的邊框

下一個例子演示了使用 clear 屬性阻止內容布局在浮動旁邊。

假設規則如下：

p { clear: left }

格式化結果可能如下所示：

兩個段落都設置了 clear: left ，因此使得第二個段落“被往下推”到浮動之下的位置，這是“空隙”被添加到其上外邊距之上的結果（見 clear 屬性）

（譯者注：此處暫略，可參見CSS手冊）

用戶代理可以視根元素上的 float 為 none 。

以下是控制浮動行為的準則：

左浮動盒的左外邊緣不可在其包含塊的左邊緣之左。右浮動元素亦是。

如果當前盒左浮動，而此前源文檔中已有元素生成了左浮動盒，那么對每個此前生成的盒而言，要么當前盒的左外邊緣在此前生成盒的右外邊緣之右，要么當前盒的頂部必須低于此前生成盒的底部。右浮動元素亦是。

左浮動盒的右外邊緣不可在其旁邊的右浮動盒的左外邊緣之右。右浮動元素亦是。

浮動盒的上外邊緣不可高于其包含塊的頂部。當浮動出現兩個折疊外邊距之間時，浮動會如同它有一個參與常規流的空匿名父塊一樣來定位。該父塊的位置由關于外邊距折疊那章的規則規定。

浮動盒的上外邊緣不可高于源文檔中此前元素生成的塊盒或浮動盒的上外邊緣。

元素的浮動盒的上外邊緣不可高于源文檔中此前元素生成的盒所在的行盒的頂部。

一個左浮動盒如果有其他左浮動盒在其左側，其右外邊緣不可在其包含塊的右邊緣之右。（寬松點的要求是：左浮動不可超出其包含塊的右邊緣，除非該盒已經盡可能靠左了。）右浮動元素亦是。

浮動盒必須盡可能地往高擺放。

左浮動盒的擺放必須盡可能地靠左，右浮動盒必須盡可能靠右。更高的位置優先于更靠近左/右的位置。

但是在CSS2.1中，如果，在塊格式化上下文中，有一個文檔流內負垂直高度的外邊距，使得浮動的位置高于它原本應當在的位置，所有這種負外邊距被設為零，浮動的位置則未定義。

這些規則中提到的其他元素僅指：在和浮動同屬一個塊格式化上下文的其他元素。

這個HTML片段結果為 b 向右浮動

ab

如果 p 元素足夠寬， a 和 b 則會各執一邊，如下所示：

（譯者注：屬性介紹略，可參看CSS手冊）

該屬性指定元素的某側不允許同此前的浮動盒相鄰。 clear 屬性不考慮其本身內的浮動或者處于其他塊格式化上下文的浮動。

各值被應用于非浮動塊級盒時，具有如下意義：

left：要求盒的上邊框邊緣低于源文檔內此前元素生成的左浮動盒的下外邊緣。

right：要求盒的上邊框邊緣低于源文檔內此前元素生成的右浮動盒的下外邊緣。

both：要求盒的上邊框邊緣低于源文檔內此前元素生成的左、右浮動盒的下外邊緣。

none：對盒相對于浮動的定位沒有約束。

非 none 值可能產生空隙 Clearance 。空隙阻止外邊距折疊并充當元素上外邊距之上的空間。空隙被用于推動元素垂直越過浮動。

計算設置了 clear 值的元素的空隙，首先要計算元素上邊框邊緣的假定位置，該位置即元素 clear 屬性值為 none 時實際上邊框邊緣應該在的位置。

如果元素上邊框邊緣的假定位置沒有越過有關浮動，那么空隙就會產生，并且外邊距折疊要根據8.3.1章規則計算。

空隙的高度被設為下述中的較大值：

塊的邊框邊緣與要被清除的最下方的浮動的下外邊緣不相交的必要高度。

將塊的上邊框邊緣放在其假定位置的必要高度。

二選一的話，空隙高度即第一種。

注意：兩種方式在目前的網頁內容的兼容性上有待評估。未來的CSS規范將規定為其中一個或另一個。

注意：空隙可以為負或為零。

例1：假設（為求簡單）有三個盒，規定如下： B1 塊的下外邊距為 M1 （ B1 沒有子元素也沒有內邊距和邊框）；浮動塊 F 的高度為 H ， B2 塊上外邊距為 M2 （沒有內邊距或邊框，沒有子元素）。 B2 的 clear 設為 both 。假設 B2 不為空。

不考慮 B2 的 clear 屬性，情況如下圖所示。 B1 和 B2 的外邊距折疊。 B1 的下邊框邊緣處在 y = 0 的位置， F 的頂部處在 y = M1 的位置， B2 的上邊框邊緣處在 y = max(M1,M2) 的位置， F 的底部處于 y = M1+H 的位置。

同時假設 B2 不在 F 之下：

max(M1,M2)

也就是說，正如規范說明的情況，我們需要添加空隙。

我們需要兩次計算空隙 C1 和 C2 ，并取二者之大： C = max(C1,C2) 。第一種方法是把 B2 的頂部和 F 的底部齊平，即，放在 y= M1+H 。也意味著外邊距之間的空隙使得外邊距不再折疊：
F 的底部 = B2 的上邊框邊緣 ?

M1 + H = M1 + C1 + M2 ?

C1 = M1 + H - M1 - M2 = H - M2

第二次計算是保持 B2 頂部位置，即 y=max(M1,M2) 處，即：

max(M1,M2) = M1 + C2 + M2 ?

C2 = max(M1,M2) - M1 - M2

假設 max(M1,M2)

C2 = max(M1,M2) - M1 - M2

C2

又因為 C1 = H - M2，得

C2

所以

C = max(C1,C2) = C1

例2：本例中空隙的高度為負，-1em。（假設所有元素都沒有邊框或者內邊距）

   First paragraph.


   Floating paragraph.


   Last paragraph.

說明：要是沒有 clear ，首段和末段兩個段落的邊距將會折疊并且末段的上邊框邊緣將同浮動段落的頂部齊平。但 clear 使得上邊框邊緣低于浮動，即，下降2em。這意味著一定會產生空隙。由此，外邊距不再折疊，空隙的高度 clearance 滿足

clearance + margin-top = 2em

也就是說，

clearance = 2em - margin-top = 2em - 3em = -1em

當 clear 設在浮動元素上時，將造成浮動定位規則的修正。第10條額外規定補充如下：

（當 clear 設在浮動元素上時，）浮動的上外邊緣必須低于所有此前左浮動盒的下外邊緣（ clear: left 情形下），或者低于所有此前的右浮動盒的（ clear: right 情形下），或者低于此前左右浮動盒的（ clear: both 情形下）。

注意：CSS1中該屬性適用于所有元素，因此所有元素都能實現效果。在CSS2和CSS2.1中， clear 屬性僅支持塊級元素。因此開發者們應當只將此屬性應用于塊級元素。如果要實現行內元素清除浮動效果，不應當如上所講的去設置空隙，而應當強制斷行并插入一個或多個空行盒（或者如9.5章節所講移動新行盒）來使要清除浮動的行內元素的行盒低于浮動盒。

在絕對定位模型中，盒根據其包含塊來精準位移。盒從常規流中完全脫離（對后來的同胞元素沒有影響）。絕對定位盒為其常規流的子元素和絕對定位（非固定定位）后代創建新的包含塊。然而，絕對定位元素的內容不在其他盒的流中。取決于重疊盒的棧級 Stack Level ，絕對定位元素的內容可能遮擋其他盒的內容（或被遮擋）。

固定定位是絕對定位的一種下屬體系。唯一的區別在于，固定定位盒的包含塊是由視口創建的。在連續媒體中，當文檔滾動時，固定盒不移動。在此意義上，它們同固定背景圖片相像。在頁面媒體中，固定定位盒在每一頁重復。這對布局很有用，比如，擺放每頁底部的標識。比頁面區域要大的固定定位盒將會被裁切。固定定位盒在初始化包含塊中不可見的部分將不會打印。

開發者可以使用固定定位去創建類框架布局。考慮如下框架布局：

這可以通過如下HTML文檔和樣式規則實現：

   
 ...  
   
 ...  
   
 ...  
   
 ...  

三種屬性均影響盒生成及布局，它們的交互如下：

如果 display 值為 none ，那么 position 和 float 不會應用。這種情況下，元素不生成盒。

否則，如果 position 值為 absolute 或 fixed ，盒為絕對定位， float 的計算值為 none ， display 的設值如下表。盒的位置由 top 、 right 、 bottom 和 left 屬性以及盒的包含塊決定。

否則，如果 float 值不為 none ，盒浮動且 display 的設值如下表。

否則，如果元素為根元素， display 設值如下表，除了其在CSS2.1中未定義 list-item 的指定值是否變為計算值 block 或 list-item 。

否則， dislay 屬性值使用指定值。

對應表：

指定值：inline-table

計算值：table

指定值：inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block

計算值：block

指定值：其他

計算值：同指定值