Understanding HTML from a document flow

Students who write HTML,CSS should be aware of what is a document flow. Document Flow: Divides a form from top to bottom in one row
And in each row from left to right in order to emit elements, that is, the document flow.

Each non-floating block-level element has a unique row, and the floating element floats at one end of the row by rule. If the line does not fit, then another new row will float. Inline elements also do not have a unique row. All elements (including block-level, inline, and list elements) can generate child rows for placing child elements. There are three conditions that will allow elements to leave the flow of the document, namely floating, absolute positioning, fixed positioning.
But floating elements in IE also exist in the document flow.

Floating elements do not account for any normal flow of documents, and the positioning of the floating elements is based on the normal flow of the document, then extracted from the document stream and moved far to the left or right. When an element is detached from the normal document flow, other elements that remain in the document flow will ignore the element and fill its original space.

Based on the flow of the document, understand the following positioning forms:

Relative positioning: The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Absolute positioning: This leaves the document stream completely, offset by the unpardonable parent element associated with the position property's non-static value.

Fixed positioning: That leaves the document flow completely, related to the viewport offset.

A document flow is the position in the document where objects are placed in the arrangement. For example, the div tag of a Web page, which occupies a whole row by default, and the P label is a full line by default, because div tags and p tags are block objects.
Most objects in a Web page use document flow by default, and some objects do not account for document flow, such as hidden fields in a form. Of course, we can also let the elements that occupy the flow of documents into the document flow, which will be used in the CSS property position to control.

Look at the definition of CSS 2.0 for position: Retrieves how objects are positioned. A total of 4 values are taken.

Absolute: absolute positioning. Drag objects from the document stream and use attributes such as Left,right,top,bottom to absolutely locate the parent object with the closest location setting. If no such parent object exists, then the body object is based. And its cascade is defined by the Z-index property
。 When the object is positioned outside the browser window, the browser displays the scroll bar.

Fixed: stationary positioning. Object positioning is in absolute (absolute) mode. But there are some rules to follow. When the object is positioned outside the browser window, the browser does not display the scroll bar, and when the ScrollBar scrolls, the object is always pinned to its original position.
Relative: relative positioning. Objects are not stackable, but they will be offset in the normal document flow based on attributes such as Left,right,top,bottom. When the object is positioned outside the browser window, the browser displays the scroll bar.

Static: The element box is normally generated. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

Inherit: An inherited value that inherits the corresponding value of its parent object.

Original: http://jingyan.baidu.com/article/ce436649eae6673773afd3ab.html

Understanding HTML from a document flow