CSS Specification > 9 Visual Formatting Model Visual Formatting Model_html/css_WEB-ITnose

视觉格式化模型 Visual Formatting Model

URL：http://www.w3.org/TR/CSS2/visuren.html

Translator: HaoyCn

Date: 10th of Aug, 2015

本文并未全部翻译，译者在原文基础上稍有添加图示。如了解全部信息，请参看规范原版。个人水平有限，欢迎指正。

9.1 视觉格式化模型介绍

本章和下章用于描述视觉格式化模型：用户代理 User Agent如何在视觉媒体 Visual Media 下处理文档树 Document Tree。

视觉格式化模型中，文档树中的每一个元素根据盒模型 Box Model 产生零个或多个盒。这些盒的布局由以下内容控制：

盒的尺寸和类型

定位体系 Positioning Scheme（常规流，浮动和绝对定位）

文档树中元素之间的关系

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

本章及下章定义的属性适用于连续媒体和页面媒体 Paged Media。然而，外边距属性的意义在页面媒体中有所不同（详情见页面模型）。

视觉格式化模型没有指定格式化的所有方面（如，没有指定字符间距算法）。本规范没有覆盖到的格式化问题上，符合规范的用户代理也可能表现不一。

9.1.1 视口 The Viewport

在连续媒体 Continuous Media 上工作的用户代理一般会向用户提供一个视口（屏幕上的一个窗口或其它可视区域）来帮助用户访问文档。用户代理可以在调整视口大小的同时改变文档的布局（见初始包含块 Initial Containing Block）。

如果视口小于渲染文档的画布区域，用户代理应提供一个滚动机制。每个画布最多有一个视口，但用户代理可以把文档渲染到多个画布上（即为相同文档提供不同视图）。

9.1.2 包含块 Containing Blocks

CSS2.1中，许多盒的定位和大小都根据一个名为包含块 Containing Block 的矩形盒的边缘来计算。一般地，生成的盒会充当其后代盒的包含块；我们称盒为其后代“创建”了包含块。说“盒的包含块”即是说“盒所处的包含块”，而不是盒所产生的包含块。

每个盒会被赋予一个相对于其包含块的位置，但它不会被局限在其包含块内；它有可能溢出。

包含块的尺寸如何计算的细节将在下章讲述。

9.2 盒的生成 Controlling Box Generation

本节描述CSS2.1中可生成的盒类型。盒的类型会影响其在视觉格式化模型中的表现。下面描述的 display 属性用来指定盒的类型。

9.2.1 块级元素 Block-level Elements 和 块盒 Block Boxes

块级元素是源文档中会被视觉格式化为块状（例：段落）的元素。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 匿名块盒

在一个如下文档中：

dc6dce4a544fdca2df29d5ac0ea9906b
Some text

More text

16b28748ea4df4d9c2150843fecfba68

(Assuming both div and p are set to display: block,) the div appears to contain both inline and block content. To make bounding formatting simpler, let's assume there is an Anonymous Block Box surrounding "Some text".

As shown in the picture, there are three boxes, one of which is an anonymous box.

In other words: if a block container box (like the box generated for the div in the example above) has a block-level box (like p in the example above) inside it, then we force it to contain only block-level boxes.

When an inline box contains an in-flow block-level box within the document flow, the inline box (and its inline ancestors within the same line box) will be placed within the block-level box (and It is continuous or interrupted only by block-level siblings separated by collapsible white space and separated by document flow elements), splitting the inline box into two boxes (even if one side is empty), one on each side of the block-level box. The line boxes before and after the break are both contained by the anonymous block box, and the block-level box becomes a sibling of the anonymous block box. When such an inline box is affected by relative positioning, any resulting movement also affects the containing block-level box.

This model will be used in the example below. Suppose there are rules as follows:

{ display: inline }
span { display: block }

is applied to the following HTML document:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Anonymous text interrupted by a block6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

This is anonymous text before the SPAN.
45a2772a6b6107b401db3c9b82c049c2This is the content of SPAN.54bdf357c58b8a65c66d7c19c8e4d114
This is anonymous text after the SPAN.

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e The

p element contains a piece of anonymous text C1, followed by a block-level element, followed by another piece of anonymous text C2. The result is a block box representing body, which contains an anonymous block box around C1, span's block box, and another anonymous block box around C2.

The inherited properties of an anonymous box are inherited from the non-anonymous box that contains it (such as the div box in the example under the subsection heading "Anonymous Block Box"). The anonymous box's non-inherited properties will take their initial values. For example, the anonymous box's font properties are inherited from the div, but its margins are 0.

When an element causes the generation of an anonymous block box, the attributes set on the element can also be applied to the box generated by the element and the content of the element. For example, in the example above, if a border is set on the p element, the border will be drawn around C1 (open at the end of the line) and C2 (closed at the end of the line).

Some user agents implement borders on Inlines Containing Blocks in other ways. For example, place its inline blocks into "anonymous line boxes" and draw inline borders around these anonymous line boxes. Since CSS1 and CSS2 do not define this behavior, only user agents that support CSS1 or CSS2 will implement it in other forms and still claim to adhere to this part of the CSS2.1 specification. This will not be done for user agents after the release of the CSS 2.1 specification.

Effect under IE6:

When calculating the percentage value, the anonymous block box should be ignored and replaced by the nearest non-anonymous ancestor box. For example, in the above div, if a child box of an anonymous block box needs to know the height of its containing block to get a percentage height. Then it will use the height of the containing block formed by the div, not the height of the anonymous block box.

9.2.2 Inline-level Elements and Inline Boxes

Inline-level elements are those in the source document that do not form a new block for their content and whose content is distributed among multiple In-line elements (e.g., highlighted text within paragraphs, in-line images, etc.). The following display attribute values ​​produce an inline-level element: inline, inline-table, and inline-block. Inline-level elements generate Inline-level Boxes, and these boxes participate in the Inline Formatting Context.

An inline box is an inline-level box, and its contents participate in the inline box's inline formatting context. A non-replaceable element with a display value of inline generates an inline box. Inline-level boxes that are not inline-level boxes (such as Replaced Inline-level Elements, inline-block elements, inline-table elements) are called Atomic Inline-level Boxes because They participate in their inline formatting context as a single opaque box.

9.2.2.1 Anonymous Inline Boxes

Any text that is directly contained within a block container element (not contained within an inline element) must be treated as an anonymous inline element.

An HTML document is as follows:

Some emphasized text

p generates a block box, which contains some inline boxes. emphasized's box is an inline box generated by the inline element em, but the other boxes (some and text's) are inline boxes generated by the block-level element p. These latter boxes are called anonymous inline boxes because they have no associated inline-level elements.

The inheritable properties of these anonymous inline boxes will be inherited from their parent block box. Non-inherited properties take their initial value. In the above example, the color of the anonymous inline box is inherited from p, but the background is transparent.

Empty content, according to the white-space attribute, will not produce any anonymous inline boxes if it can be collapsed.

In this specification, if the type of an anonymous box can be clearly defined based on the context, both anonymous inline boxes and anonymous block boxes may be referred to as anonymous boxes.

When formatting tables, more types of anonymous boxes will appear.

9.2.3 Run-in Boxed Insertion box

This section is retained to keep the section number consistent with the previous draft. display: run-in is now defined in CSS3 (see "CSS Basic Box Model").

9.2.4 display attribute

(Translator’s Note: Only a brief introduction of common values ​​are recorded here)

block element creates a block box. The

inline-block element creates an inline-level block container. The interior of an inline block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. The

inline element creates one or more inline boxes.

none The element does not appear in the formatting structure (that is, in visual media the element neither creates a box nor affects layout). Its descendant elements also do not create any boxes: the element and its contents are completely removed from the formatting structure. Setting the display attribute on descendant elements does not override this behavior.

Note that the none value does not produce a visible box; it does not produce a box at all. There is a mechanism in CSS that creates boxes for elements in the formatting structure and affects formatting, but the boxes themselves are invisible. Please visit the visibility section for details.

The calculated value is the same as the specified value except for positioned and floated elements and the root element (see below). The calculated value of the root element is changed as described below.

Note that although the initial value of display is inline, the user agent's default stylesheet rules may override this value. See the HTML4 reference stylesheet in the appendix.

9.3 Positioning Schemes

In CSS2.1, boxes are laid out according to the following three systems:

Normal Flow. In CSS 2.1, the normal flow includes block formatting for block-level boxes, inline formatting for inline-level boxes, and relative positioning of block-level boxes and inline-level boxes.

Floats. In the float model, boxes are first laid out according to the regular flow, and then detached from the regular flow and displaced as far to the left or right as possible. Content can be laid out around the float.

Absolute positioning Absolutr Positioning. In the absolute positioning model, the box is completely detached from the regular flow (having no effect on subsequent sibling elements) and is assigned a position based on the containing block.

Floating elements, absolutely positioned elements, and root elements are all called Out of Flow; other elements are called In-flow within the document flow. The layout flow of element A consists of A, elements that are within the document flow and whose nearest ancestor out of the document flow is A.

9.3.1 Select positioning system: position attribute

(Translator’s Note: The translation of this section has been omitted)

static: The box is a regular box. According to the regular flow layout, the top, right, bottom, and left attributes do not take effect.

relative: The positioning of the box is calculated according to the regular flow (the box is called the regular in-flow positioning). The box is then moved relative to its normal position. When box B is positioned relatively, the positioning of boxes after box B is calculated as if B has not moved. table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption were not defined last time.

absolute: The position (and possibly size) of the box is specified by the top, right, bottom, left attributes. These properties specify movement based on the box's containing block. Absolutely positioned boxes break away from the document flow. This means that they have no effect on the subsequent layout of sibling boxes. At the same time, even if the absolutely positioned box has margins, it will not collapse like any other margins.

fixed: The positioning of the box is calculated according to the absolute model, but otherwise the box remains fixed relative to some reference. As with the absolute model, this box's margins are not collapsed from any other margins. In handheld, projection, screen, typewriter tty, and television tv media types, the box is fixed relative to the viewport and does not move when scrolled. In print media types, boxes are rendered on all pages and are fixed based on the page box, even if the page is accessed through the viewport (such as print preview). This behavior is not defined in other media types. Developers can specify fixed based on dependent media. For example, if you want the box to be fixed at the top of the screen viewport, but not appear at the top of the printed page, the two settings can be separated by using the @media rule, as follows:

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

User agents cannot display the contents of fixed boxes in pages. Note that user agents may use other methods to print invisible content. See Chapter 13, "Contents Outside Page Boxes."

User agents may treat position on the root element as static.

9.3.2 Box Offsets: top, right, bottom, left

(Translator’s Note: This section is temporarily omitted, please refer to the CSS manual)

9.4 Normal Flow

Boxes in the normal flow all belong to a certain formatting context, either a block formatting context or an inline formatting context. In short, you cannot have both. Block-level boxes participate in block formatting context, and inline-level boxes participate in inline formatting context.

9.4.1 Block formatting context

Floating, absolutely positioned elements, non-block box block containers (such as inline-block, table-cell, and table header table -caption) and block boxes whose overflow property is not visible (except when the value is propagated to the viewport) will create a new block-level formatting context for their contents.

In a block formatting context, boxes are placed vertically one behind the other from the top of the containing block. The vertical distance between two sibling boxes depends on the margin property. The vertical margins of adjacent block-level boxes within the same block formatting context are collapsed.

In a block formatting context, the left outer edge of each box touches the left edge of the containing block (in a right-to-left format, the right outer edge of the box touches the right edge of the containing block), This is true even with floats (although the line box inside the box may shrink due to the float), unless the box creates a new block formatting context (in which case the box itself may shrink due to the float).

For information about pagination in Paged Media, please refer to the section on Allowing page pagination.

9.4.2 Inline formatting context

In an inline formatting context, boxes are placed horizontally one after another from the top of the containing block. The horizontal margins, borders, and padding of the box are all taken into account during layout. Boxes may be vertically aligned in different ways: they may be aligned to the bottom or top, or they may be aligned to the baseline of their content text. The rectangular area that contains all the boxes in a line is called a line box.

The width of the line box depends on the containing block and the float. The height of the line box depends on the rules given in the line box height calculation section.

A row box is always tall enough to contain all the boxes it contains. However, it may be higher than the highest box it contains (for example, the containing box is baseline aligned). When the height of a box (B) is less than the height of its containing line box, B's vertical alignment is determined by the vertical-align property. When several inline-level boxes cannot be completely contained in a single line box in the horizontal direction, they are divided into two or more vertically arranged line boxes. Therefore, a paragraph is a vertical stack of multiple line boxes. Line boxes are stacked with no vertical spacing (unless stated otherwise) and never overlap.

In general, the left edge of a line box is against the left edge of its containing block, and its right edge is against the right edge of the containing block. However, a floating box may be placed between the containing block and the edge of the line box. Therefore, even though line boxes within a formatting context within the same line are constant width (width of the containing block), the width of the line box may still vary due to the reduction in available horizontal space caused by floating. Line boxes within a formatting context within the same line often vary in height (for example, one line may contain an image but other lines contain only text).

When the total width of inline-level boxes in a line is smaller than the containing block that contains them, their horizontal distribution within the line depends on the text-align attribute. If justified, user agents may stretch space and word spacing in inline boxes (except inline-table and inline-block boxes).

When the width of the inline box exceeds the width of the line box, the inline box will be divided into multiple boxes, and the decomposed boxes will be distributed among multiple line boxes. If an inline box cannot be split (for example, the inline box contains a single character or the language-specific hyphenation rules do not allow hyphenation, or the inline box's white-space attribute value is nowrap or pre), then the inline box will overflow. Line box.

When an inline box is split, margins, borders, and padding have no visual impact at any breakpoints.

Inline boxes may also be split into multiple boxes within a line box due to bidirectional text processing.

Line boxes are created on demand in order to contain inline-level content within an inline formatting context. Some line boxes do not contain text, retain whitespace, inline elements with non-zero margins or padding or borders, other in-flow content in the document flow (such as pictures, inline blocks, or inline tables), and are not preserved. Trailing newlines MUST be treated as zero-height line boxes for purposes of determining the positioning of the elements they contain, and as non-existent for all other purposes.

The following is an example of inline box construction. The subordinate paragraph (created by the HTML block-level element p) contains anonymous text crossed by em and strong.

Several emphasized words appear
in this sentence, dear.

The

p element generates a block box to contain five inline boxes , three of which are anonymous:

• Anonymous: "Several"

• em: "emphasized words"

• Anonymous: "appear"

• strong: "in this"

• Anonymous: "sentence, dear."

  To format this paragraph, the client Place the five inline boxes into the progress boxes. In this example, the box generated by the p element creates the containing block of the line box. If the containing block is wide enough, all inline boxes will be placed in a single line box:

  Several emphasized words appear in this sentence, dear.

  If the width is not enough, Inline boxes will be split and distributed among multiple line boxes. The paragraph may become:

  Several emphasized words appear

  in this sentence, dear.

  or:

  Several emphasized

  words appear in this

  sentence, dear.

  In this last case, the em box is split into two em boxes ( Now called split1 and split2). Margins, borders, padding, or text decorations have no visual effect before split1 or after split2.

  Look at the following example:

  
  100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e

  <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;
  }
  531ac245ce3e4fe3d50054a55f265927
  < ;/head>
  6c04bd5ca3fcae76e30b72ad730ca86d
  

  Several emphasized words appear here.

  
  36cc49f0c466276486e50c850b7e4956
  73a6ac4ed44ffec12cee46588e518a5e

  according to p width, these boxes may be distributed as follows:

• The margins are inserted before emphasized and after words

• Margins are inserted before, above, and below the emphasized value, and after the words value, above, and below. Dashed borders are rendered on three sides of each word.

9.4.3 Relative Positioning

Once a box is laid out following regular flow or floating, it may be relatively displaced based on this position. This is called relative positioning. Moving the box (B1) in this way has no effect on the subsequent box (B2): B2 is given a position as if B1 had no displacement, and B2 is not repositioned after B1 is moved. This means that relative positioning can cause boxes to overlap. However, if relative positioning causes an overflow:auto or overflow:scroll box to overflow, the client must make the content accessible to the user (at its offset position) by creating scroll bars, which may affect layout.

A relatively positioned box maintains its regular flow size, including line breaks and the space originally reserved for it. The section Containing Blocks explains the case where a relatively positioned box creates a new containing block.

For relatively positioned elements, left and right displace the box horizontally without changing its size. left moves the box to the right, right to the left. left or right does not cause the box to be split or stretched, so the value applied always satisfies: left = - right.

If the left and right values ​​are both auto (their default values), the value applied is 0 (that is, the box remains in its original position).

If left is auto, its applied value is the negative value of right (that is, the box moves left by the right value).

If right is auto, its applied value is the negative of left.

If neither left nor right is auto, positioning is over-constrained and one of the values ​​must be ignored. If the containing block's direction property has a value of ltr, the left value wins and the right value changes to -left. If the containing block's direction attribute has a value of rtl, the right value wins and the left value is ignored.

Example. The following three style rules are equivalent.

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
}

The top and bottom attributes move the relatively positioned element up and down without changing the size. top moves it down, bottom moves it up. There is no splitting or stretching of the box caused by top or bottom, so the value applied always satisfies: top = - bottom. If both are auto, their values ​​are 0. If one of the values ​​is auto, the property takes the negative value of the other property. If neither is auto, bottom is ignored (that is, bottom applies the negative value of top).

Note: Dynamically moving the relative positioning box in a script environment can produce animation effects (see visibility attribute). Although relative positioning can be used for superscript and subscript effects, line heights are automatically adjusted without taking their positioning into account. See the description in the Row Height Calculation section for more information.

Examples of relative positioning are provided in the section comparing regular flows, floats, and relative positioning.

9.5 Floats

A box that is moved to the left or right in the current row is called a float. The most interesting feature of floats is that content can be laid out next to them (or disabled by the clear attribute). The content will be laid out to the right of the left floating box, or to the left of the right floating box. The following content is an introduction to floating positioning and content layout. The guidelines that control the behavior of floats are described in the section on float properties.

The floating box will be moved to the left or right until its outside touches the edge of the containing box or another floating outer edge. If a line box is present, the top outer edge of the floating box will be aligned with the top of the line box.

If there is not enough room horizontally for the float, it will move down until it can fit it or there are no other floats left.

Because floats are not in the normal flow, non-positioned block boxes created before or after the float will be positioned vertically as if the float did not exist. However, the current line box and line boxes created after the float are shortened as needed to make room for the floated margin box.

Line boxes will float next to each other when there is a vertical positioning that satisfies all four of the following conditions:

On top of or below the line box

at or above the bottom of the line box

below the floated top margin, and

below the float Above margin edge

Note: This means that a float with a total height of zero or negative Outer Height will not shorten the line box.

If the line box is shortened so that it cannot hold any content, then the line box will be moved down (its width will be recalculated) until the content can be accommodated or there is no more float. Any content in the current row that is before the float box will be moved to the other side of the float in the same row and re-layout. In other words, if an inline-level box is placed in a line box before a left float is placed in it, and the remaining space in the line box can accommodate the left float, then the left float will be placed within the line, aligned with the top of the line box, and the left float will be placed within the line box. Inline-level boxes that enter this line box will be moved accordingly to the right side of the float (the right side is the other side of the left float), and vice versa for rtl and right floats.

For tables, block-level replaceable elements, or elements that create a new block formatting context in the regular flow (such as elements with an overflow value other than visibile), their border boxes cannot belong to the same block formatting context as them. The margin boxes of floated elements overlap. If necessary, the effect of clearing floats should be achieved by placing them behind existing floats, but they can be placed next to floats if there is enough space. But this may make the element's box narrower than defined in Section 10.3.3. CSS2 does not define when a user agent can position an element next to a float, nor how narrow an element can become.

Example. In the document fragment below, the containing block is not large enough to accommodate the content next to the float, so the content needs to be moved below the float and positioned within the line box based on its text-align property.

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

45a2772a6b6107b401db3c9b82c049c2 54bdf357c58b8a65c66d7c19c8e4d114
Supercalifragilisticexpialidocious

The snippet might look like this:

Floats can be juxtaposed, and this model also works for juxtaposed floats in the same row.

The following rule will float all img boxes of class="icon" to the left (and set the left margin to 0).

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

Consider the following HTML code and stylesheet:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Float example6e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388
img { float: left }
body, p, img { margin: 2em }
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

81a325900844ef9fb3450175651ab349
Some sample text that has no other...
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

The img box floats left. The content that follows is formatted to the right of the float, starting from the same line as the float. The line boxes next to the float are shortened by the float, but then resume their "normal" width (that is, the width of the containing block created by the p element). The document is formatted as follows:

If the document is as follows, the formatting result is the same:

6c04bd5ca3fcae76e30b72ad730ca86d

Some sample text
71eaa48077903eb333a6ce10858966b4
that has no other...
36cc49f0c466276486e50c850b7e4956

This is Because the content on the left side of the float is replaced by the float and re-layout on the right side of the float.

As mentioned at the beginning of Section 8.3.1, the margins of floating elements will not collapse with the margins of adjacent boxes. So, in the previous example, the vertical margins of the p box and img float box don't collapse.

Floated content will be stacked as if the float created a new stacking context, except for elements that are positioned, create a new stacking context, and participate in the merger of the float's parent stacking context. Floats can overlap other boxes in the regular flow (for example, when the regular flow box next to the float has negative margins). When overlap occurs, floats are rendered above Non-positioned In-flow Blocks and below inline boxes.

Here is an example of a float that overlaps the border of an element in regular flow.

The float blocks the border of the block box it overlaps

The next example demonstrates using the clear attribute to prevent content from being laid out next to the float.

Assume the rules are as follows:

{ clear: left }

The formatted result may look like this:

Both paragraphs have clear: left set, thus causing the second paragraph to be "pushed down" to a position below the float, which is the result of "gap" being added above its upper margin (see clear attribute)

9.5.1 Float positioning: float attribute

(Translator’s Note: This is temporarily omitted, please refer to the CSS manual)

User agents can view the root element The float on is none.

The following are the guidelines that govern floating behavior:

The left outer edge of a left floating box cannot be to the left of the left edge of its containing block. The same goes for right-floated elements.

If the current box floats left, and an element in the previous source document has generated a left floating box, then for each previously generated box, either the left outer edge of the current box Either to the right of the right outer edge of the previously generated box, or the top of the current box must be lower than the bottom of the previously generated box. The same goes for right-floated elements.

The right outer edge of the left floating box cannot be to the right of the left outer edge of the right floating box next to it. The same goes for right-floated elements.

The top outer edge of a floating box cannot be higher than the top of its containing block. When a float appears between two collapsing margins, the float is positioned as if it had an empty anonymous parent participating in regular flow. The position of this parent block is dictated by the rules in the chapter on margin collapse.

The upper outer edge of the floating box cannot be higher than the upper outer edge of the block box or floating box generated by the previous element in the source document. The upper outer edge of the

element's floating box cannot be higher than the top of the line box where the box generated by the previous element in the source document is located.

If a left floating box has another left floating box to its left, its right outer edge cannot be to the right of the right edge of its containing block. (A looser rule: a left-floated element cannot extend beyond the right edge of its containing block unless the box is as far left as possible.) The same goes for right-floated elements.

Floating boxes must be placed as high as possible.

The left floating box must be placed as far to the left as possible, and the right floating box must be placed as far to the right as possible. Higher positions take precedence over positions closer to the left/right.

But in CSS2.1, if, in a block formatting context, there is a margin with negative vertical height within the document flow, causing the float to be positioned higher than it would otherwise be The position of all such negative margins is set to zero, and the position of a float is undefined.

Other elements mentioned in these rules only refer to other elements that belong to the same block formatting context as the float.

This HTML fragment results in b float right

a92eb7bc1f1cbb2434bfafea1285716eeb54bdf357c58b8a65c66d7c19c8e4d114

If the p element is wide enough, a and b will each take one side, as shown below:

9.5.2 Controlling the flow after floating: clear attribute

(Translator's Note: The attribute is briefly introduced, please refer to the CSS manual)

This attribute specifies that a certain side of the element is not allowed to be adjacent to the previous floating box. The clear attribute does not consider floats within itself or in other block formatting contexts.

When applied to non-floating block-level boxes, each value has the following meaning:

left: Requires the top border edge of the box to be lower than within the source document The lower outer edge of the left floating box generated by the previous element.

right: The upper border edge of the box is required to be lower than the lower outer edge of the right floating box generated by the previous element in the source document.

both: The upper border edge of the box is required to be lower than the lower outer edge of the left and right floating boxes generated by previous elements in the source document.

none: There is no constraint on the positioning of the box relative to the float.

Values ​​other than none may produce clearance gaps. Gaps prevent margins from collapsing and act as space above the margins on an element. Gaps are used to push elements vertically across floats.

To calculate the gap of an element with a clear value set, first calculate the assumed position of the upper border edge of the element, which is where the actual border edge should be when the element's clear attribute value is none.

If the assumed position of the element's top border edge does not cross the associated float, then gaps will occur and margin collapse will be calculated according to the rules of Chapter 8.3.1.

The height of the gap is set to the greater of:

The border edge of the block does not coincide with the lower outer edge of the bottommost float to be cleared The necessary height of intersection.

• Place the top border edge of the block at the necessary height of its assumed position.

  If you choose one of the two, the gap height is the first one.

  Note: The compatibility of the two methods with current web content needs to be evaluated. Future CSS specifications will specify one or the other.

  Note: The gap can be negative or zero.

  Example 1: Assume (for simplicity) that there are three boxes, and the regulations are as follows: the lower margin of block B1 is M1 (B1 has no sub-elements, padding and borders); the height of floating block F is The margins on the H,B2 block are M2 (no padding or borders, no child elements). B2's clear is set to both. Assume B2 is not empty.

  Regardless of the clear attribute of B2, the situation is as shown in the figure below. The margins of B1 and B2 are collapsed. The lower border edge of B1 is at the position of y = 0, the top of F is at the position of y = M1, the upper border edge of B2 is at the position of y = max(M1,M2), and the bottom of F is at the position of y = M1 H location.

  Also assuming that B2 is not under F:

  max(M1,M2)

  That is, as the specification states, we need Add gaps.

  We need to calculate the gaps C1 and C2 twice and take the larger of the two: C = max(C1,C2). The first method is to place the top of B2 flush with the bottom of F, i.e., place it at y= M1 H. It also means that the gap between the margins makes the margins no longer folded:

  Bottom of F = top border edge of B2?

  M1 H = M1 C1 M2 ?

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

  The second calculation is to keep the top position of B2, that is, y=max(M1,M2), that is:

  max( M1,M2) = M1 C2 M2 ?

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

  Assume max(M1,M2)

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

  C2

  And because C1 = H - M2, we get

  C2

  So

  C = max(C1,C2) = C1

  Example 2: The height of the gap in this example is negative, -1em. (Assuming all elements have no borders or padding)

  
  First paragraph.
  

  
  

  
  Floating paragraph.
  

  
  

  
  Last paragraph.
  

  Note: Without clear, the margins of the first and last paragraphs will be collapsed and the top of the last paragraph will be folded. The edge of the border will be flush with the top of the floating paragraph. But clear makes the top border edge lower than the float, i.e., 2em down. This means that gaps are bound to occur. As a result, the outer margin is no longer folded, and the height clearance of the gap satisfies

  clearance margin-top = 2em

  In other words,

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

  When clear is set on a floating element, it will cause the floating positioning rules to be modified. Additional provisions in Article 10 are added as follows:

• (When clear is set on a floated element,) the upper outer edge of the float must be lower than the lower outer edge of all previous left floating boxes (clear : left in the case), or lower than all previous right floats (clear: right in the case), or lower than the previous left and right floats (clear: both).

  Note: This property in CSS1 applies to all elements, so all elements can achieve the effect. In CSS2 and CSS2.1, the clear attribute only supports block-level elements. Therefore developers should only apply this attribute to block-level elements. If you want to achieve the clear floating effect of inline elements, you should not set a gap as mentioned above, but should force a line break and insert one or more empty line boxes (or move a new line box as mentioned in Chapter 9.5) to make the floating elements to be cleared Inline elements have their line box lower than the float box.

9.6 Absolute Positioning

In the absolute positioning model, the box is accurately displaced according to its containing block. The box is completely detached from the regular flow (has no effect on subsequent sibling elements). An absolutely positioned box creates a new containing block for its regular flow children and absolutely positioned (non-fixed positioned) descendants. However, the content of absolutely positioned elements is not in the flow of other boxes. Depending on the stack level of the overlapping boxes, the content of absolutely positioned elements may obscure (or be obscured by) the contents of other boxes.

9.6.1 Fixed Positioning

Fixed positioning is a subordinate system of absolute positioning. The only difference is that the containing block of the fixed positioning box is created by the viewport. In continuous media, the fixed box does not move when the document is scrolled. In this sense, they are similar to fixed background images. In page media, fixed positioning boxes repeat on every page. This is useful for layouts, such as placing logos at the bottom of each page. Fixed positioning boxes that are larger than the page area will be cropped. Fixed positioning box not being printed if it is not visible in the initializing containing block.

Developers can use fixed positioning to create frame-like layouts. Consider the following frame layout:

This can be achieved with an HTML document and style rules as follows:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7A frame document with CSS 2.16e916e0f7d1e588d4f442bf645aedb2f
a286c59d4154f8b2f4efcf4e44f41830
body { height: 8.5in }/ 计算百分百高度需要 /
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#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;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
ada442393f9f941237cb0e496c17b0f5 ... 16b28748ea4df4d9c2150843fecfba68
25f64f3fe53f082cb34aea85a4f22849 ... 16b28748ea4df4d9c2150843fecfba68
243a8f3f087936dc3f96e2f0cf018c22 ... 16b28748ea4df4d9c2150843fecfba68
171c8477c82d74a9b2eea84eaab93167 ... 16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

9.7 display，position，float 之间的关系

三种属性均影响盒生成及布局，它们的交互如下：

如果 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

• 指定值：其他

• 计算值：同指定值