visual formatting model
9.1 introduction to the viaual formatting model
- 这节是介绍视觉格式化模型：UA是怎么在media下处理文档树的。
- 在视觉格式化模型中，在文档树的每个元素根据盒模型生成个或者更多的盒子，这些盒子的布局被以下东东控制
- *box dimensions and type.*盒子
- *positioning scheme (normal flow, float, and absolute positioning).*定位系统：流，浮动和绝对定位
- *relationships between elements in the document tree.*在文档树中每个元素的关系。
- *external information (e.g., viewport size, intrinsic dimensions of images, etc.).*外部信息，如窗口大小，图片本来的大小等等。
- 这节的属性应用于continuous media和paged media ，然而，在这节中的margin properties和在页面媒体有所不同
9.1.1 The biewport
- 在流媒体中的UA经常提供用户一个视口，在屏幕的一个窗口或者是其他的可视区域。
- 当视口小于渲染文档的画布区域，UA应该提供一个滚动机制，每个画布最多有一个视口，但是UA可能把一个视口渲染给多个画布（就是提供给文档多个视图）？？？
9.1.2 Containing blocks
许多的盒子位置都是以一个叫做containing block的矩形边缘来计算的。通常，containing block’s包含后代的盒子，我们说这个盒子为他的后代建立了包含块，”a box 's containing block“意味着它所处在哪一个包含块中而不是它产生了那个包含块。
每个盒子的位置是遵循包含块的但是它可能不完全被局限在包含块里，也有可能溢出。
9.2 controlling box generation
这一节是描述盒子的类型，一个盒子类型的影响它在视觉格式化模型的表现，可以用display 来指定盒子的类型
9.2.1 block-level elements and block boxes
- 块级元素是在源文件中被看作是块的元素，例如p，display以下值的可以把元素变成块元素：block 、list-item 和table
- 块级盒子是参与格式化上下文的，每个块级元素生成一个主要的块级盒子，这个块级盒子肯包含后代和内容，并且可能参与定位系统（positioning scheme）一些块级元素可能生成额外的盒子，他们会根据主要的盒子摆放。
- 除了下节讲的表格盒子，和可替代的元素，一个块级盒子也是块级容器盒子，一个块级容器盒子要么包含一个块级盒要么者是建立一个行内格式化上下文并且只包含行内元素的盒子，不是所有的块级容器盒子都是块级盒子，replaced inline blocks 和non-replaced table cells 是块级容器盒子但是不是会计和，是块级盒子同时也是快容器盒子的叫做块盒。
9.2.1.1 Anonymous block boxes
<DIV>
Some text
<P>More text</P>
</DIV>
（假设div和p都是块元素，大div有inline content和块元素内容，为了好格式化，我们假设有一个匿名的盒子在”some text之间“）
换句话说，如果一个块容器盒子（像上面的div）有块级盒子在里面，（就像上面的p）那么我们强制它只包含块级盒子，
-
当一个行内盒子包含一个文档流的块级盒子，那么这个行级盒子会被打断，如下
p { display: inline } span { display: block }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <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> </html>p元素包含一个文本c1，接着一个块元素，后面是文本c2.结果生成了一个代表body’的块级哈子，包含了围绕c1的一个匿名的块级盒子，一个叫做span的块级盒子，一个围绕c3的匿名块级盒子。
匿名盒的继承属性会从包含它的非匿名盒那里继承（比如，在子节标题“匿名块盒”下的那个例子中的
div盒）。匿名盒的非继承属性将取其初始值。例如，匿名盒的字体属性继承自div，但是外边距是0。当一个元素导致了匿名块盒的生成，则该元素上设置的属性一样能应用于该元素生成的盒和该元素的内容。例如，在上面例子中，如果在
p元素上设置了边框，则这个边框将画在C1（在行的结尾开）和C2（在行的结尾闭）周围。计算百分比值时，应忽略匿名块盒，而以最近的非匿名祖先盒来替代。例如，上面的
div里，如果一个匿名块盒的子盒在需要知道其包含块的高度来获得一个百分比高度。那么它将使用div形成的包含块的高度，而不是匿名块盒的高度。- 匿名盒子不能被css选择器选中，不能被赋予属性，所有的值都是inherit，所有不能继承的属性值都是initial
9.2.2 行内级元素 Inline-level Elements 和 行内盒 Inline Boxes
行内级元素是在源文档中那些不为其内容形成新的块、其内容分布在多行中的元素（如，段落内着重文本，行内图片等等)。以下的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.3 run-in boxes
9.2.1 the diaplay property
’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 |
value :
-
block
- This value causes an element to generate a block box.
-
inline-block
- This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. inline-block内部被格式化成块盒子，但是元素本身被格式化成行盒子
- list-item
- This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box. For information about lists and examples of list formatting, please consult the section on lists.这个值会使一个元素(例如HTML中的Ll)生成一个主块框和一个标记框。有关列表和列表格式示例的信息，请参阅列表部分.
- none
- 这个值会导致一个元素不会出现在formatting结构中(也就是说，在视觉媒体中，该元素不会产生框，也不会对布局产生影响)。后代元素也不生成任何框;元素及其内容完全从格式化结构中删除。不能通过在后代上设置“display”属性来重写此行为。
- 请注意，显示“none”并不会创建一个不可见的框;它根本不创造盒子。CSS包括一些机制，使元素能够在格式化结构中生成影响格式化但本身不可见的框。详情请参阅可见性部分。
- table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
- These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).
- computed value 和specified value 是一样的，除了浮动，定位元素，和根元素，对于根元素来说，computed value被怎样改变看 relationships between ‘display’, ‘position’, and ‘float’. 这一节
-
p { display: block } em { display: inline } li { display: list-item } img { display: none } /* Do not display images */
9.3 positioning schemes
-
一个盒子可以按照三种定位方法摆放
- Normal flow ，一个常规流包括块级盒子的快格式化，行级盒子的行格式化，和相对定位的行块级盒子。
- floats 在浮动的模型中 ，首先根据常规流布局，然后从常规流脱离并且向左移或者右移，内容可以布局在浮动周围
- absolute positioning 在绝对定位模型中，一个盒子从常规流完全脱离，（这没有影响到后面的兄弟元素）并且根据包含块（就是父元素嘛）分配一个位置
-
一个元素如果是浮动的，绝对定位，或者是根元素，那么这个元素被是脱离文档流的，其他的叫做文档流内（in flow），
-
the flow of an element a 由a、在文档流内且最近的脱离文档流的祖先是a的元素构成（？？？）
9.3.1 choosing a positioning scheme “position” property
’position’
| Value: | static | relative | absolute | fixed | inherit |
|---|---|
| Initial: | static |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
value
-
static
The box is a normal box, laid out according to the normal flow. The ‘top’, ‘right’, ‘bottom’, and ‘left’ properties do not apply.
-
relative
-
The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
-
相对定位：盒子的位置根据常规流计算（盒子被称为常规流内定位）盒子会根据它常规的位置偏移，当box b是相对定位，则它后面的盒子就像b没有偏移那样计算。
table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell以及table-caption上次未定义此效果。
-
-
absolute
-
The box’s position (and possibly size) is specified with the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties. These properties specify offsets with respect to the box’s containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
-
盒子的定位（还有尺寸）被top，right，bottom和left属性指定，这些属性根据盒子的包含块来指定偏移，绝对定位盒子脱离文档流，这意味着它对之后的同胞盒子布局没有影响，同时，计师绝对定位盒子有外边距，也不和其他的外边距折叠
-
-
flixed
-
盒子的定位根据absolute模型来计算，除此之外，盒子也要相对于某些参照物保持固定，和absolute的模型一样，margin不折叠，在手持，这样，屏幕，打字机，电视媒体类型中， 框相对于视口是固定的，在滚动时不会移动。在打印媒体类型的情况下，盒子在每个页面上都呈现，并且相对于页面框是固定的，即使通过一个视口看到页面(例如在打印预览的情况下)。对于其他媒体类型，表示方式是未定义的。作者可能希望以媒体依赖的方式指定“固定”。例如，作者可能希望一个盒子保持在屏幕上视口的顶部，而不是在每个打印页面的顶部。这两个规范可以用@media规则分开，例如:
@media screen { h1#first { position: fixed } } @media print { h1#first { position: static } }UAs不能对固定框的内容进行分页。请注意，UAs可以以其他方式打印不可见的内容。参见第13章“页面外的内容”。
用户代理可以将根元素上的position视为“静态”。
-
9.3.2 Box offsets: ‘top’, ‘right’, ‘bottom’, ‘left’
如果元素的’position’属性的值不是’static’，则该元素被称为已定位。定位元素生成定位盒子，根据四个属性进行布局:
top’
| Value: | length| % | 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’. |
这个属性制定了绝对定位盒子的上外边距相对这个盒子的containing block 偏移了多远，对于相对定位的盒子，这个便宜根据它自己的位置偏移，
其他属性差不多一样。
9.4 normal flow
正常流中的盒子属于某个格式化上下文，该上下文可以是块的或行内的，但不能同时是块和行内的。块级别的盒子参与块格式化上下文。行内级别的盒子参与内联格式上下文
9.4.1block formatting contexts
-
浮动、绝对定位的元素，非块盒子的块容器（像是inlink-blocks table-cells, and table-captions ） 以及
overflow属性不为visible的块盒（除了该值被传播到视口的情况）将为其内容创建一个新的块级格式化上下文。 -
在块格式化上下文中，盒从包含块顶部一个接一个地垂直摆放。两个同胞盒间的垂直距离取决于
margin属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。 -
在块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），甚至有浮动也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文（在这种情况下盒子本身可能由于浮动而变窄）。
9.4.2 Inline formatting contexts
-
在行内格式化上下文中，盒从包含块的顶部一个接一个地水平摆放。盒水平方向的外边距、边框和内边距在布局时都会考虑在内。盒的垂直对齐方式则不一：可能按底部或者顶部对齐，又或者按它们内容文本的基线对齐。包含了一行里所有盒的矩形区域被称为行盒
Line Box。 -
line box 的宽度时由containing block和浮动决定的。高度取决于在高度章节的规则。
-
一个行级盒子永远对于它包含的盒子是足够高的，但是它可能比它包含的最大的盒子高。（例如，盒子是对齐的以便于基线对齐）当一个b盒子的高度比包含他的盒子高度少的时候，在行盒子里面的b的垂直对齐方式被vaetical-align属性决定，当几个行级盒子不能适应在一个盒子里面的水平排列的时候，它会被分配到两个或者多个垂直摆放的行盒中。因此，一个段落就是多个行盒子的垂直堆叠， 行盒的堆叠没有垂直间距（除非有特别声明）并且从不重叠。
-
通常的，line-box的左边距挨着它的包含块的左边缘，右面也挨着他的包含块右边缘。但是，浮动的盒子可能在包含块和行盒子的边缘之间， 因此，尽管在同一行内格式化上下文中的行盒是等宽的（包含块的宽度），由于浮动会造成可用的水平空间减少，行盒的宽度仍可能变动。同一行内格式化上下文中的行盒在高度上通常是变动的（比如，一行可能包含图片但其他行仅包含文本）。
-
当全部的在一行的行级盒子的宽度比包含他们的行级盒子的款的话，他们在行盒子里面的水平分配被text-align属性决定，如果这个属性值是justify，UA可能 用户代理可能拉伸行内盒（
inline-table和inline-block盒除外）中的空格和字间距。 -
当行内盒的宽度超过行盒宽度时，行内盒将被分为多个盒，被分解出的盒则又分布在多个行盒中。如果一个行内盒不可切割（比如，行内盒包含的是单个字符或者语言指定的断字规则不允许断字，又或者行内盒的
white-space属性值为nowrap或pre），那么该行内盒将溢出行盒。 -
为了包含行内格式化上下文中的行内级内容，行盒按需创建。有的行盒不包含文本、保留空白、外边距或内边距或边框不为零的行内元素、其他文档流内
In-flow内容（如图片、行内块或行内表格），并且不以保留的换行符结尾，如果是为决定它们所包含的元素的定位，则必须视其为零高度的行盒，除此之外的其他目的下应视其为不存在。下面是一个行内盒构造的例子。下属的段落（由HTML块级元素
p创建）包含了有em和strong交叉的匿名文本。<p>Several <em>emphasized words</em> appear <strong>in this</strong> sentence, dear.</p>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之后都没有视觉效果。
- 在最后这个情况里，
-
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> -
根据P的宽度，方框的分布如下:
- 外边距插在了
emphasized之前和words之后 - 内边距被插在了
emphasized之前、上、下，words值后、上、下。虚线边框渲染在了每个单词的三边。
- 外边距插在了
9.4.3relative positioning
-
一旦盒子被根据正常流或者是浮动布局，他可能根据移动这个位置来移动 这被称作相对定位。通过这种方式移动盒（
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属性）。尽管相对定位可被用于上标和下标效果，但行高在自动调整时不会将其定位纳入计算。参见行高计算一节的描述了解更多信息。相对定位的例子将在对比常规流、浮动和相对定位一节中提供
submit
9.5 Floats
-
在当前行中一个盒被移动到左侧或右侧称为浮动。浮动最有趣的特点是内容可以布局在其旁边（或者为
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; } <p> <span> </span> Supercalifragilisticexpialidocious </p>可能如下所示
浮动可以并列，而这个模型也适用于同一行中的并列浮动元素。
浮动可以并列，而这个模型也适用于同一行中的并列浮动元素。
下面的规则会使所有的
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节开头所言，浮动元素的外边距不会同相邻盒的外边距折叠。因此，在之前的例子中，
p盒和img浮动盒的垂直外边距不会折叠。这是因为浮动左侧的内容为浮动所替代，并被重新布局在了浮动的右侧。
正如8.3.1节开头所言，浮动元素的外边距不会同相邻盒的外边距折叠。因此，在之前的例子中，
p盒和img浮动盒的垂直外边距不会折叠。浮动的内容会像浮动创建了新的堆叠上下文
Stacking Context一样堆叠起来，但定位元素、创建了新的堆叠上下文并参与了浮动的父级堆叠上下文并的元素除外。浮动可以同常规流中的其他盒重叠（比如，浮动旁边的常规流盒有负外边距的时候）。当发生重叠时，浮动会被渲染在非定位文档流内块Non-positioned In-flow Blocks之上，文档流内行内盒之下。这有个例子，演示了浮动与常规流中元素的边框重叠的情况
浮动图片挡住了与其重叠的块盒的边框
下一个例子演示了使用
clear属性阻止内容布局在浮动旁边。假设规则如下：
p { clear: left }格式化结果可能如下所示：
两个段落都设置了
clear: left，因此使得第二个段落“被往下推”到浮动之下的位置，这是“空隙”被添加到其上外边距之上的结果（见clear属性）
9.5.1 Positioning the float: the ‘float’ property
’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 |
不用于生成绝对定位的盒子
-
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property).
-
right
Similar to ‘left’, except the box is floated to the right, and content flows on the left side of the box, starting at the top.
-
none
The box is not floated.
User agents may treat float as ‘none’ on the root element.
以下是控制浮动的精准规则：
- 左浮动盒子的
left outer edge可能不是containing block的left edge。类似的规则适用于右浮动元素。 - 如果当前盒子是左浮动，源文档中前面的元素也生成了左浮动盒子，那么当前盒子的
left outer edge在前面左浮动盒子的right outer edge，或者当前盒子的顶部比前面浮动盒子的底部要低。类似的规则适用于右浮动元素。 - 左浮动盒子的
right outer edge可能并不是右浮动盒子left outer edge的右边。类似的规则适用于右浮动元素。 - 浮动盒子的
outer top可能不高于containing block的顶部。当浮动发生在两个折叠边距中间时，浮动的定位好像是有一个空的父匿名块盒在文档流中。这样的父块的位置在边距合并小节中有规则说明。 - 浮动盒子的
outer top可能不高于文档中先前元素生成的块盒或浮动盒的outer top。 - 浮动盒子的
outer top可能不高于文档中先前元素生成位于line box中的盒子的顶部。 - 一个左浮动框的左侧还有另一个左浮动框，其右外边缘可能不在其包含块的右边缘的右侧。类似的规则适用于右浮动元素。
- 浮动盒子尽可能高的放置。
- 左浮动盒子尽可能往左放置，右浮动盒子尽可能往右放置。8 的规则优先级要高于 9 的规则。
但是在 CSS 2.2 中，如果 block formatting context 中，流内的负垂直边距会使浮动的位置高于所有负边距设置为 0 的位置。浮动的位置没有定义。
9.5.2 Controlling flow next to floats: the ‘clear’ property
’clear’
| Value: | none | left | right | both | inherit |
|---|---|
| Initial: | none |
| Applies to: | block-level elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
值
-
none元素不会向下移动清除之前的浮动。
-
left元素被向下移动用于清除之前的左浮动。
-
right元素被向下移动用于清除之前的右浮动。
-
both元素被向下移动用于清除之前的左右浮动。
-
inline-start该关键字表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。
-
inline-end该关键字表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。
注意：清除浮动只对前面的浮动元素有效，对后续的浮动元素无效。
非 none 值的 clear 属性可能会导致 clearance。clearance 会阻止边距折叠，并且充当元素 margin-top 上方的空间。它用于将元素在垂直方向跨过浮动元素。
计算一个元素设置 clear 属性后的 clearance，首先需要确定元素的上 border 边界的假定位置。假定位置也就是元素 clear 属性为 none 时上 border 边界实际所在的位置。
如果元素上 border 边界的假定位置没有越过相关的浮动元素时，就会触发 clearance。边距折叠规则参考8.3.1
clearance 的距离取以下两个较大值：
- 将元素盒子上
border边界移动到需要被清除的浮动元素的下margin边界（最低的那个边界）的距离。 - 盒子的上
border边界移动到假定位置的距离。
注意：上面两种方法计算距离时，均是按照不折叠边距计算的。即跟文档流中前一个元素的 margin-bottom，浮动元素的 margin 边界和设置清除浮动的元素的 margin-top 有关。
clearance 可以是负数也可以是0
如果一个盒子的上下边距是相邻的，此时边距可能会折叠贯穿（collapse through）盒子。这种情况下，它的位置取决于它和其他被折叠边距元素的关系：
- 如果该元素的边距和父元素的上边距折叠，那么该元素盒子的
top border边界和父元素的top border边界相同。 - 否则，要么父元素没有参与边距折叠，要么只有父元素的下边距参与折叠。该元素的
top border边界与该元素的bottom border非0时一样。
注：发生折叠贯穿（
collapse through）的元素的位置不会影响其他参与边距折叠的元素的位置；只有在布局这些元素的后代时才需要确定元素的top border边界。
其实就是因为clear以后，浮动后面的盒子外边距顶端必须低于浮动盒子的底部，从之前没清除浮动的位置到清除浮动后的距离就是所谓的clearance。
9.6.1 fixed positioning
固定定位是绝对定位的子类。唯一不同的是固定定位的 containing block 是 viewport。**对 continuous media，固定定位盒子不随文档的滚动而移动。**这方面类似于 fixed background images。对于 paged media，固定定位的盒子每一页都会重复。例如，这对于在每个页面的底部放置一个签名很有用。固定定位的盒子在初始包含块中不可见的部分将不会打印。
一个框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
BODY {
height: 8.5in
}
/* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
.border {
border: 1px solid black;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</style>
<body>
<DIV id="header" class="border"> ... </DIV>
<DIV id="sidebar" class="border"> ... </DIV>
<DIV id="main" class="border"> ... </DIV>
<DIV id="footer" class="border"> ... </DIV>
</body>
</html>
9.6.2Relationships between ‘display’, ‘position’, and ‘float’
这 3 个属性影响盒子的定位和布局，如下：
- 如果
display属性为none，那么position和float属性无效。这种情况，元素也不会生成盒子。 - 如果
position属性值为absolute或fixed，盒子是绝对定位的，盒子float的computed value为none，display设置如下表。盒子的位置由top, left, right, bottom属性和containing block决定。 - 如果
float属性值不为none，盒子是浮动的，并且display属性值设置如下表。 - 如果元素是根元素，
display设置如下表，除了在 CSS 2.2 中未定义的指定的list-item是否会变成block或list-item计算值。 - 否则
display属性值按照指定值应用。
| Specified value | Computed value |
|---|---|
| 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 |
| others | same as specified |
9.8 Comparison of normal flow, floats, and absolute positioning
9.9 Layered presentation
Specifying the stack level: the ‘z-index’ property
| Name: | z-index |
| Value: | auto | | inherit |
| Initial: | auto |
| Applies to: | positioned elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
对与定位盒子来说，z-index 属性指定了：
- 在当前堆叠上下文中的堆叠等级。
- 盒子是否建立一个堆叠上下文。
属性值含义如下：
-
盒子在当前堆叠上下文中的堆叠等级。同时盒子建立一个新的堆叠上下文。
-
auto
盒子在当前堆叠上下文中的堆叠等级是
0。如果盒子position: fixed或是根元素，它也会建立一个新的堆叠上下文。
在本节中，in front of 表示用户面对屏幕时更靠近用户。
在 CSS 2.2 中，每个盒子在 3 个维度上都有一个位置。除了水平和垂直位置，盒子沿 z 轴放置。当盒子在视觉上重叠时，z 轴位置特别相关。
堆叠上下文描述了渲染树绘制到画布上的顺序。堆叠上下文中可以包含其它堆叠上下文。从其父堆栈上下文的角度来看，堆栈上下文是原子的；其他堆叠上下文中的盒子不会出现在自己堆叠上下文的盒子中间。
每个盒子属于一个堆叠上下文。一个堆叠上下文中的每一个定位的盒子有一个堆叠等级（stack level）数值，表示自己在同一个堆叠上下文中相对其它盒子的位置。堆叠等级大的盒子在堆叠等级小的之上。盒子可能会有一个负的堆叠等级。同一个上下文中堆叠等级相同盒子根据根据文档树先后顺序进行堆叠。
根元素形成根堆叠上下文。其它的堆叠上下文由 z-index 属性不为 auto 的定位元素（包括相对定位）生成。堆栈上下文不一定与包含块有关。未来版本的 CSS，其他属性也可能会创建堆叠上下文，例如’opacity’ 属性。
每个堆叠上下文中，下面各层按照先后顺序绘制：
- 形成堆叠上下文元素的 background 和 border。
- 堆叠等级为负值的子堆叠上下文，值越小越先绘制。
- in-flow 的非行内、非定位的后代元素。
- 非定位的浮动元素
- in-flow 的行内非定位的后代元素，包含
inline-table和inline-block。 - 堆叠等级为 0 的子堆叠上下文和后代定位元素。
- 堆叠等级为正值的子堆叠上下文，值越小越先绘制。
每一个堆叠上下文中，堆叠等级为 0 的定位元素（layer 6），非定位的浮动元素（layer 4），行内块（layer 5），行内 table（layer 6），绘制时就像这些元素生成了新的堆叠上下文一样，但是它的定位后代元素和子堆叠上下文参与当前的堆叠上下文。
绘制顺序将递归运用在每一个堆叠上下文上。堆叠上下文的绘制顺序在 Appendix E 中有详细描述。
6968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
