1. The words written in the front

Remember the first time contact front-end development or should call Web front-end development, staring from designer to page layouts, hair to stay for a long time, always want to in life to find things out, can be associated to deepen understanding and memory, suddenly my mind had been “newspaper” come out, can have associated representational objects, also have rules to follow, Development is also more handy. This experience left a deep impression on me. Web, as a graphical user interface for information transmission, user interaction and service delivery, is far more complex and wonderful than newspaper, but just like the airplane was born after human beings saw the birds flying towards it through complex and wonderful design and evolution. The Web page is also an evolution of traditional information media such as newspapers.

2. Document flow, out of document flow

When we read information on a particular page of a newspaper, it is customary to read from top to bottom and left to right. This is in line with the reading habits of people (most countries). When corresponding to a Web page, the elements of the page are arranged by default from top to bottom and from left to right in the order in which they were written. This streaming arrangement is known as Normal Flow in the Document Flow/regular Flow /CSS specification

9.4 Normal flow

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

Boxes in the document flow (element box model) belong to one of the typesetting contexts, either block-level typesetting line context or inline typesetting context, but the difference is both. Block-level boxes participate in block-level typesetting contexts, and line-level boxes participate in inline typesetting contexts

PS: FC, BFC, and IFC are explained in subsequent CSS collections, which determine the layout rules for elements

Now that we know what document flow is, what is “out of document” flow and how do you get out of document flow? So let’s continue with the specification

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

An element that is floating or absolutely positioned or root (HTML) is said to be out of document flow. If an element does not leave the document flow, it is in the regular flow. A stream of an element needs to consider that element and all elements whose closest ancestor is not a regular stream. PS: Floating and absolute positioning are also different ways of leaving the document flow. In the floating model, a box is laid out according to the regular flow, then taken out of the flow and shifted as far left or right as possible, not completely out of the document flow, whereas in the absolute positioning model it is completely out of the regular flow, with no effect on its siblings.

3. Positioning scheme

Positioning schemes are explained in the specification

9.3 Positioning schemes

In CSS 2.1, a box may be laid out according to three positioning schemes:Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

In CSS 2.1, boxes of elements can be arranged according to three positioning schemes:

1. General flow: In CSS 2.1, the general flow includes block formatting of block level boxes, inline formatting of row level boxes, and the relative position of block level boxes and row level boxes.

2. Float. In the floating model, a box is first placed according to a regular flow, then a box is taken out of the flow and moved as far left or right as possible. Content may flow along the sides of a float.

3. Absolute positioning. In absolute, fixed models, the box is completely removed from the regular stream (it has no effect on subsequent siblings) and is specified relative to the containing block.

That is, there are three positioning schemes in CSS, and the different positioning schemes affect the layout of elements.