An overview of the

Float :left/right and position:absoulte/fixed are commonly used in everyday writing code. We all know that these CSS styles can pull HTML elements out of normal-flow, but do they have the same effect out of normal-flow ?

Document flow versus text flow

The text flow

A text stream is simply a sequence of characters arranged within an element.

The document flow

Document flow, normal flow, standard flow, normal flow, etc.

Document flow refers to the automatic arrangement of all elements in the document flow from left to right (non-block-level elements) and from top to bottom (block-level elements) during the calculation and layout of HTML elements.

There are three types of positioning of elements in typography:

(1) Document flow: block-level formatted block-level boxes, inline formatted inline boxes, and relatively positioned block-level boxes and inline boxes

(3) Absolute /fixed position (position: Absolute /fixed)

See the W3C standard here: www.w3.org/TR/2016/WD-…

Out of document flow and out of text flow

According to the official documentation, there are float and absolute/fixed ways to escape from the document flow.

So let’s look at the differences

Use float

In normal layout:

 <div id="nf">
        In CSS, normal flow includes block formatting 
        of block-level boxes, inline formatting of 
        inline-level boxes, and relative and sticky 
        positioning of block-level and inline-level boxes.
 </div>
 <div id="fl">
        Normal Flow
 </div>
 <p id="ap1">Normal Flow</p>
 <p id="ap2">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.</p>
Copy the code

<style>
        #nf{
            background-color: gray;
            width:200px;
        }
        #fl{
            background-color: black;
            color:white;
        }
        #ap1{
            background-color: yellow;
        }
        #ap2{
            background-color: lightblue;
        }
</style>
Copy the code

Float the # NF element:

From the above figure, we can see that the #fl,# AP1, and # AP2 elements ignore the # NF element when calculating the layout position, starting from the far left of the body element, while their internal text does not ignore the # NF element.

In this case, the float takes the element out of the document flow, but not out of the text flow, where it still has its place

Use position: Absolute

Before using position: Absolute, the code and style of the page are the same as they were in the float case

Position :absolute:

From the above figure, we can see that the #fl,# AP1, and # AP2 elements ignore the # NF element when calculating the layout position, starting from the far left of the body element, and their internal text ignores the # NF element as well.

This case shows that position: Absolute removes elements from the document flow and text flow.

Use position: Fixed

Before position: Fixed is used, the code and style of the page are the same as they were in the float case

Position :fixed:

From the figure above, we can see that the #fl,# AP1,# AP2 elements and their internal text ignore the position of the # NF element.

In this case, position:fixed removes elements from the document flow and text flow.

conclusion

Out of document flow refers to the layout rules of elements out of normal elements. Other boxes in document flow will automatically ignore the elements out of document flow to locate when calculating layout layout.

Position: Absolute /fixed The difference between a float and a position:absolute/fixed

(1) Float the element out of the document flow, but not out of the text flow, because the text content of other boxes will take up space when calculating the layout.

(2) Absolute positioning takes elements out of the document flow, as well as out of the text flow, so that the text content of other boxes does not take up space when calculating the layout.