What is the meaning of the terms “Normal Flow” and

问题:

What is the meaning of the terms "Normal Flow" and "Out of Flow", in terms of HTML, CSS and Browser?

回答1:

Out of Flow is any element that has been positioned relatively or absolutely or anything that has been floated.

The rest would be considered Normal Flow.

Look at CSS Positioning and Layout and pay close attention to the "Methods of Positioning Elements" section.

回答2:

"Normal Flow" is the typical way the browser renders, with consideration of the elements around it and other elements considerations for it. "Out of Flow" means the element is "ignored" or the behavior "changed" by elements around it. Edited this next sentence: Thus, if an element is anything other than static (the default) it may be out of flow (I say may, because for relative to be out of flow, it must be shifted) or if the element has a float then it becomes "out of flow" because it does not follow either a normal inline standard of one element after another in a line or a normal block standard of elements stacking on each other down the page. This page is (of course) more thorough in understanding this: http://www.w3.org/TR/CSS2/visuren.html

回答3:

The static and relative elements still in the Normal Flow, but the absolute and fixed elements are removed out of the flow.

from http://www.w3.org/TR/CSS21/visuren.html#choose-position

static: The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.
relative: The box's position is calculated according to the normal flow (this is called the position in normal flow).

......

also you can read more about css positioning here: The position declaration