Understanding of HTML document flow and text flow

Text flow, generally speaking is a series of characters, is the document reading and output order, that is, we usually see from left to right, up and down the Read and output form, in the page each element is sorted and displayed in this order, and the position property can be separated from the text flow out of the display.

Document flow, the original English version of the document is "normal flow", translated into regular flow, normal flow is better understand it.

Intuitively, regular flow refers to the process in which elements are arranged in the order in which they are placed in the HTML, the main form is top-down (block-level elements), one row after the other, and each row from left to right (inline elements).

There are three types of targeting:

General flow: Also contains three types: block-level element block-level format, in-line elements in-line formatAnd the two types of elements relative positioningWay. Floating (float) absolute positioning (position:absolute/position:fixed)

Documentation for the Consortium:

9.3 Positioning schemes

In the CSS 2.1, a box may laid out according to three positioningschemes:

1. Normal flow. In CSS 2.1, Normalflow includes block formattingof block-level boxes, inline formattingof inline-level boxes, and relative Positioning Ofblock-level and Inline-level boxes.
2. Floats. In the Float model,a box was first laid out according to the normal flow, then taken out of the flow and shiftedto the left Or right as far as possible. Content Mayflow along the side of a float.
3. Absolute positioning. In the absolute positioning model, a box is removed fromthe normal flow entirely (it had no impact on later siblings) and a Ssigned a position with respect to a containing block.

An element was called out Offlow if it was floated, absolutely positioned, or is theroot element. An element is called in-flow if it's not out-of-flow. Theflow of an Elementa are the set consisting of a and all in-flowelements whose nearest out-of-flow ancestor are A.

1 out-of-document flow

So there are only two cases of out-of-document flow, float and absolute positioning.

1.1 Floating out of document flow

When float is detached from the document stream, other box elements ignore the element, but the text inside the other box will still give it a seat and surround it, meaning it does not break out of the text stream. The following is the code and effect in the regular stream (showing only the contents of the body):

<Divclass= "Outofnormal">This is outofnormal the content area.</Div><H2>Normal Contentnormal contentnormal contentnormal contentnormal Content</H2><P>This is normal content area. This is normal content area. This is normal content area. This is normal content area.</P>

Css:

. Outofnormal {  height: 200px;   width: 220px;   background-color: #000000;   color:#FFFFFF;   text-align:Center;   line-height:200px;   Overflow:hidden;}

：

After adding a floating attribute to the DIV:

. Outofnormal {  height: 200px;   width: 220px;   background-color: #000000;   color:#FFFFFF;   text-align:Center;   line-height:200px;   Overflow:hidden;   float:left;}

It can be found that the div is out of the flow of the document, H2 elements and P elements are not located in the Div, so top up. But the text is still positioned on the right side of the Div, stating that it is out of the flow of the document and not out of the text stream.

However, it is important to note that if the previous element of a floating element is also floating, it follows the previous element.

1.2 Absolute positioning out of document flow (absolute)

Change the float to absolute positioning (absolute):

. Outofnormal {  height: 200px;   width: 220px;   background-color: #000000;   color:#FFFFFF;   text-align:Center;   line-height:200px;   Overflow:hidden;   position:absolute;}

You can see that the text is also top to the left, ignoring the DIV, leaving the document stream and also out of the text stream.

1.2 Absolute positioning out of document flow (fixed)

Try again with position:fixed;

. Outofnormal {  height: 200px;   width: 220px;   background-color: #000000;   color:#FFFFFF;   text-align:Center;   line-height:200px;   Overflow:hidden;   position:fixed;}

Found the same effect.

Summary: This means that using float can leave an element out of the document stream without leaving the text stream (the element ignores its existence, but the text in the element surrounds it, but not out of the DOM tree,with the browser's review element, you can see the elements that are out of the document flow,, and using absolute positioning can leave elements out of the document flow and text flow (the element and the text within it are not positioned to exist).

Reference: https://www.zhihu.com/question/24529373/answer/29135021

https://www.zhihu.com/question/21911352

Understanding of HTML document flow and text flow