CSS Standard Document Flow and Departure Document Flow

Standard document flow

Document flow : Refers to the flow arrangement of elements from left to right and top to bottom in the process of element typesetting and layout by default. And finally the form is divided into rows from top to bottom, and the elements are arranged in order from left to right in each row.

Microscopic phenomenon of standard flow:

Blank folding phenomenon :
When inputting text in an html file, multiple spaces will be merged into one space and displayed on the browser page. This phenomenon is called blank folding phenomenon.
The height is uneven and the bottom is aligned : the
text and the size of the picture will cause the elements of our page to appear uneven, but when viewing our page in the browser, we will always find that the bottom is aligned;
Automatically wrap, when one line is not finished, write in a new line :
If you write too much text in a line and exceed the interface, then the browser will automatically wrap to display our text.

Standard document flow level

Divided into two levels: block-level elements and inline elements;

Block-level elements:

Occupy a row, cannot be side by side with any other elements
Can accept width and height
If you do not set the width, the width will default to 100% of the father, which is the same width as the father

Elements in the line:

Side by side with other elements
The width and height cannot be set. The default width is the width of the text

In HTML, tags are divided into: text level and container level;
text level: p, span, a, b, i, u, em
Container level: div, h series, li, dt, dd

The CSS classification is very similar to the above, except for p: all text-level tags are inline elements, except for p, which is a text-level but a block-level element. All container-level tags are block-level elements.

Interconversion between block-level elements and in-line elements

Block-level elements can be set as inline elements; inline elements can also be set as block-level elements.
for example:

div {
  display: inline;
  background-color: pink;
  width: 400px;
  height: 400px;
}

display is the display mode, which is used to change the inline and block-level nature of the element. Inline is "inline". Once display:inline is set for a label,
the label immediately becomes an inline element.

There is no difference between div and span at this time;
At this time, the width and height of the div cannot be set (even if it is set, it will not be displayed);
At this time div can be side by side with others;

The same

span {
   display: block;
   width: 300px;
   height: 300px;
   background-color: green;
}

"Block" means "block";

The span tag becomes a block-level element, which is no different from div;
span can set height and width;
The span must occupy a row, and others cannot be side by side with it;
If you don't set the width, it will fill the father.

Departure from standard document flow

Three methods:
1) Floating
Floating elements will break away from the document flow;
create a new document and add two divs on the page and add class to the div respectively.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

Set a width, height and background color for the div to float one to the left

<style>
* {
/*清除默认边距*/
margin: 0;
padding: 0;
       }
div {
width: 200px;
height: 200px;
       }
.one {
float: left;
background-color: orange;
       }
.two {
background-color: yellow;
       }
</style>

Then open with Chrome and the result will be like this

It can be seen that two disappeared after floating one to the left. At this time, review the elements and take a look.

You will find that two went under one, this is because the box for one floats to the left. Floating elements do not take up space, so two occupies the position of one.

2) Absolute positioning :
add three divs and class respectively

Set absolute positioning for one and add top: 110px; left: 150px;

You can see that one can float on them

3) Fixed positioning :
change one to fixed positioning

Refresh browser

Found that he is the same as absolute; the only difference is that he is fixed on the browser, fixed will not scroll with the scroll bar of the browser;