CSS document flow, block-level elements (block), and inline elements (inline). I have read many books and read many articles before. All I have seen is fragmentary basic knowledge of CSS layout, which is relatively superficial. I have read O' Reilly, I found that the concept of document flow mentioned in it made me very sensitive. Unfortunately, the book did not explain what document flow is. Maybe the author thought it was too simple to be worth mentioning. But I think this concept It’s really important. After understanding it, a bunch of CSS layout theories become easy to understand, and I realize the rationality of CSS design. So I based my guesses and experiments to come up with an explanation. If there are any mistakes , completely normal.
document flow
Divide the form into rows from top to bottom, and arrange the elements in each row from left to right, which is the document flow.
Each non-floating block-level element occupies its own line, and floating elements float at one end of the line as required. If the current line cannot fit, it will be floated on a new line.
Inline elements will not occupy a row. Almost all elements (including block-level, inline and list elements) can generate sub-rows for placing sub-elements.
There are three situations that will cause elements to exist out of the document flow, namely floating, absolute positioning, and fixed positioning. But in IE, floating elements also exist in the document flow (which makes me think this is reasonable><).
Floated elements do not occupy any normal document flow space, and the positioning of floating elements is still based on the normal document flow, and then extracted from the document flow and moved as far as possible to the left or right. The text content will be wrapped around the floated element. When an element is extracted from the normal document flow, other elements still in the document flow ignore the element and fill its original space.
The confusing concept of floating is caused by the browser's interpretation of the theory. It can only be said that many people use IE as the standard, but in fact it is not.
Based on document flow, we can easily understand the following positioning patterns:
relative positioning,
That is, the element is offset relative to its position in the document flow. But the original placeholder is retained.
absolute positioning,
That is, it is completely separated from the document flow and is offset relative to the nearest parent element with a non-static value of the position attribute.
fixed positioning,
That is, it is completely separated from the document flow and offset relative to the viewport.
There are a few more questions that I can't figure out next.
As one of the three basic elements, what is the main difference between inline elements and block-level elements?
How do you understand when the Clear property takes the right value? It seems that the experimental situation is always inconsistent with the theory.