2. Page Layout Example Notes

Three positioning mechanisms in 1.CSS

• Standard document flow is the positioning in a streaming layout
• Floating positioning
• Relative positioning

2. When the element is set to float or relative positioning, it cannot be centered by setting the margin auto.

3. The floating element is still in the standard document stream, and it will be affected by the standard document flow. Unlike relative positioning, it is at different levels.

4. After a float is set, only the first statistic element that is immediately behind it is affected. The adjacent element is next to it, depending on the float set by the element.

5. Clear float: The elements affected by the floating element are clearly affected.

1 Tag { 2     clear:both  3 } 4  5 or 6  7 Tag { 8    width:100%; 9    overflow:hidden;  Ten }

The 6.br label has no effect when it clears the floating effect. Because a BR tag can only be changed one time, plus multiple BR tags for the page is not beautiful

7. When the element is set to absolute positioning: if the width is not set, its width is adjusted with the content.

1 Absolute Positioning 2 selector {3      position:absolute;  or fixed  4 }56 relative positioning-refers to the position relative to its own original, not completely out of standard document flow 7 selector {8      position:relative;  9 }

2. Page Layout Example Notes