One of the CSS positioning mechanisms: normal flow

Not finding a complete set of Chinese articles about ordinary flow, floating, and absolute positioning, so he took the courage to decide to write a piece. To do this roughly chewed out the CSS2.1 8 box model and 9 Visual formatting model. To tell you the truth, I really see a little head, hehe ~

Document flow, in fact, there is no such word in the standard. If you translate a document into English, it is document flow, but there is only one other word in the standard, called a normal flow, or a regular stream. But it seems that everyone is more accustomed to the name of the document flow, because many Chinese translation of the book is so. For example, "CSS mastery", the original book from the beginning to the end of the only normal flow of the word, never appeared document flow documents. But the Chinese version of "Normal Flow" and "document Flow" are alternating.

What is a normal stream? Simply put, the element determines the arrangement of the elements in the order in which they are placed in the HTML. And this process follows the standard description.

To illustrate this from different angles, I have taken some definitions that may be lengthy, specific, or obscure to others:

Divides the form from top to bottom, and emits the elements in a left-to-right order in each row, which is the document flow.

Jennifer.Kyrnin@About.com: Normal flow is how elements are rendered on a Web page in most cases. All HTML is in a block-boxes, block-level element, or inline box (inline boxes, inline element).

Rainbo Design: When the browser starts rendering the HTML document, it starts at the top of the window and, through the entire document content, allocates the space needed for the element. Unless the size of the document is specifically restricted by CSS, the browser expands the document vertically to accommodate all of the content. Each new block-level element is rendered as a new row. Inline elements are rendered horizontally in order until the current row encounters a boundary and then the next line of vertical rendering. This process is a normal document stream.

As you can see, the flow is understood as a flow, completely speaking. A normal flow is an element arrangement and positioning process in general.

But in fact, in CSS2.1RC, the essence of ordinary flow is one of three kinds of localization mechanisms (positioning schemes), which is defined as:

Reference:

Normal flow. In CSS 2.1, normal flow includes blocks formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.

This process consists of block formatting (blocks formatting), inline formatting (inline formatting), relative positioning (relative positioning), and run-in boxes positioning. Seem very different from those above, but to break it down is still consistent.

In addition, 9.4 Normal flow also has a paragraph:

Reference:

Boxes in the normal flow belong to a formatting context, which may is block or inline, but not both simultaneously. Block boxes participate the formatting context. Inline boxes participate in a Inline formatting context.

This is a description of the paragraph, not a definition. box in the normal stream is a formatting context (format) in which the type can be block or inline, but not both. Also, the Block boxes (box) is formatted in the Block-formatting context (chunk format), Inline boxes (block inner box) is formatted in the Inline formatting context (in-line formatting contexts) Of.

We know that any element that is being rendered belongs to a box and is not block or inline. Even text that is not wrapped by any element, according to different circumstances, will also belong to the anonymous block boxes or inline boxes. So the above description, that is, all the elements are divided into the corresponding formatting context.

Combining the above definition, and let's say that the formatting context is a scoping, then in particular, the ordinary flow is such a process:

1. In the corresponding blocks formatting context, the block-level elements in the order of their HTML, in their container box from the top left corner, from top to bottom of the vertical allocation of space, stack (stack), and exclusive line, the boundary close to the parent container. Two the distance between adjacent elements is determined by the margin property, and the vertical boundaries in the same block formatting context are overlapped (collapse). Also, the width of block-level elements is not affected by floating elements unless a new formatting context is created (which is why floating elements can be covered above block-level elements).

2. In the corresponding inline formatting context, the inline elements start at the top of the container and are arranged horizontally one after another. Horizontal fills, borders, and margins are valid for inline elements. But vertical fills, borders, and blank edges do not affect their height. All inline boxes in a horizontal row make up the rectangular area named Line box. Line box's height always has all the inline box, and is only related to the row height. The width of line box is affected by the presence of the parent container and the floating element (this is the text wrapping the floating element). If line box is less than the width of the container, line box's horizontal arrangement depends on the text-align. If line box is wider than the container, truncate lines box and wrap the elements in the new row box (padding and margin values are not applied at the truncation). If line box cannot be truncated, such as a word that is too long or specifies no wrapping, the container overflows.

3. The relative positioning of these block box and inline box is offset from the location of the arrangement. The element retains the space it used to occupy.

Said a lot of things, in fact, just say how to arrange the elements. Those are very easy to understand, except for a concept--formatting context.

What is the formatting context? The context is always interpreted as a context, then the formatting contexts should refer to the relationship between the formatting.

However, there are no more definitions and explanations in the criteria.

Although there is no information on the inline formatting context in Mozilla Developer Center, there is a description of the block formatting context: A block formatting Co ntext is a part of the Web page visual CSS rendering, a block boxes arrangement and a float element interaction area.

In short, it's a sphere of action. It can be understood as a separate container, and the layout of the box in the container is irrelevant to the container outside.

In these cases, you will create a new block formatting context:

root element

Floating or absolutely positioned elements

Display value is Inline-blocks, Table-cell or table-caption

Overflow value is not visible

Although the standard does not mention that the root element creates a new block-formatting context, Mozilla mentions it, and this also explains the creation of an initial contextual environment.

Here is the concept of building (establishes), which is similar to the concept of building container blocks (containing block). For example, A is a B parent element, and when B is rendered, its position and size refer to a container block, which is established by its parent element a. Yes, a bit of a simple problem complicated. Although the parent element is essentially a container for child elements, there is a concept of establishing (establishes) in the middle of the process. And the concept of this creation is applied to other scopes, including the block formatting context.