CSS document flow_html/css_WEB-ITnose

Many CSS books will mention the keyword "document flow" when talking about the positioning mechanism of CSS. However, maybe this word is too simple for the author to need to explain, so it is rare to see it. There is a specific explanation of this word, but I think that understanding this concept is crucial to a good understanding of the entire positioning mechanism! I checked the netizens' understanding on the Internet, and then read W3C to combine it with my own understanding. It can be summarized by the sentence above from W3C: "The position of the element is determined by the position of the element in (X)HTML."

To understand the above sentence well, you can Use elimination method. There are three positioning mechanisms of CSS: ordinary flow, float (float: left/right/none) and positioning (position: static/relative/absolute/).

Ordinary flow is the normal document flow. The writing method in HTML is the layout from top to bottom and left to right.

Example:

Obviously this is the most common document flow, from left to right, one by one in order 01 first, 02 is second and 03 is ranked last.

Once the FLOAT attribute or absolute positioning (excluding static/relative) is assigned to one of the DIVs, these two will still remain normal document flow), it is completely separated from the document flow and does not take up space.

Example:

For better identification, I gave 01 green, 02 gray and 03 yellow respectively. Then float 01 left. As a result, 01 is out of the document flow and takes up no space at all, so 02 takes the place of 01. As a result, 02 is covered by 01.

Similarly, absolute positioning is the same as FLOAT, it is separated from the document flow and no longer takes up the space of the original document flow. Let’s take another problem that everyone often encounters in daily life to prove it? Highly adaptive

Think about it again and again, the principle of highly adaptive is actually this:

< ;div id=”a”>

 

This is b

  

This is c

                                                                                                                                                                                                                        . The height is 500. Both b and c are left floating

Effect:

It is obvious that a has not been opened. The reason is that they no longer take up space when they float. Since there is no space to occupy, it means that there is nothing in the container, so it cannot be opened. The solution is to add a DIV after the yellow DIV and then clear the float. Let him have space to occupy, and it will naturally expand. Try it!

Effect after clearing:

Summary:

1 , There are three positioning mechanisms of CSS: ordinary flow, floating and positioning.

2. Document flow: from top to bottom, from left to right, one by one, simple or normal layout.

3. Positioning: (position)

Static: Maintain document flow.

Relative: Displacement relative to its original position and maintaining document flow, taking up space.

Absolute: Detached from the document flow, taking up no space and positioned relative to its containing block.

4. Float: (flaot) is separated from the document flow and does not take up space.

5. I used to think that the position:static attribute was redundant, but now it seems that its role is to keep the element in the document flow!

The above are all problems that I, "No. 1", discovered during the learning process. Children's shoes with more ideas are welcome to express their opinions and exchange opinions with each other to achieve the effect of common progress.