CSS Document Flow

Many CSS books on the positioning mechanism of CSS will refer to a keyword "document Flow", but perhaps the word for the author is not necessary to explain it, so very few see the specific explanation of the word, but I think to understand the concept of a good understanding of the entire positioning mechanism is crucial! Online check the understanding of netizens, and then turn over the next , combined with their own understanding. It can be summed up in the words above: "The position of the element is determined by the position of the element in the (X) HTML." "

To understand the above sentence well, you can use the exclusion method. There are 3 positioning mechanisms for CSS : normal flow, floating (float:left/right/none), and positioning (position:static/relative/absolute/).

Ordinary flow is normal document flow, in the HTML is written in from top to bottom, from left to right layout.

Cases:

<div id= "></div><div id=" ></div><div></div>

It is obvious that this is the most common document flow, from left to right, one by one in order 01 first,02 second, and 03 in thefinal arrangement.

Once a div is given a float property or absolute positioning (excluding static/relative, both of which still maintain a normal flow of documents), it is completely out of the document flow and does not occupy space.

Cases:

In order to be able to identify better, I gave 01 green,02 Gray,03 yellow respectively. And then give 01 left to float. As a result,01 is out of the document stream, completely free of space, so 02 has replaced 01 of the original position, the result 02 was covered by 01.

Similarly,absolute positioning, like float, is out of the document stream and no longer occupies the original document flow. To give a confirmation--highly adaptive--of the problems that we often encounter everyday

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

<div id= "a" >

<div id= "B"> This is b</div> .

<div id= "C"> This is c</div> .

</div>

This structure is a wrapped B and C, the color is unchanged,A is the height of the automatic,B is the height of the ,c height of 500. both B and C are left-floating .

Effect :

It was obvious that A was not being stretched. The reason is that they no longer occupy space when they float. Since there is no space to occupy, it is equal to nothing in the container, so do not open. The workaround is to add a div behind the yellow div and clear the float. Let him have the space to occupy, the nature is open. Give it a try!

The effect after removal:

Summarize:

1, CSS positioning mechanism has 3 kinds: normal flow, floating and positioning.

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

3, positioning: (position)

Static: Keeps the document flow.

Relative: Displacement occurs relative to its original position and maintains document flow, occupying space.

Absolute: Out-of-document flow, which does not occupy space and is positioned relative to its containing block.

4, floating: (Flaot) out of the document flow, does not occupy space.

5, before always feel position:Static This property is redundant, now it seems that his role is to let the elements keep the flow of the document!

These are I-"1th", in the process of learning to find problems, welcome more ideas of children's shoes to communicate with each other, in order to achieve the effect of common progress.

CSS Document Flow