-Page layout ---
Standard,-Arrange in accordance with the default way
float,
fixed
Floating-why use floating, because many layout effects cannot be done with standard streaming
1. How to achieve three divs arranged in a row
2. How to achieve left and right alignment of two boxes
What is floating?
Used to create a floating box, move it to the side until the left or right edge touches the containing block or another floating box
Floating characteristics
1. Floating elements deviate from the standard stream --- off standard-no longer retain the original position, the position is occupied by other standard streams
2. If multiple boxes are set to float, they will be displayed in a row according to the attribute value and aligned at the top
The floating elements are close to each other (there will be no gaps). If the parent width cannot fit these floating boxes, the extra boxes will be aligned on a new line
3. Floating elements have the characteristics of inline block elements
If the width of the block-level box is not set, the default width is the same as the parent, but after adding the float, its size is determined according to the content
Floating strategy
1. Floating elements are often used in conjunction with the parent element of the standard stream
Common web page layouts
Why clear the float
--- The parent box does not have a fixed height. The height of the child box is as high as the parent box (because sometimes the parent box is not convenient to give height)
---- If the parent box has no height, the height of the parent box will become 0 after floating, because the float does not occupy space, and the father cannot find the height of the child
clear: left / right / both // clear float
1. Extra label method-add empty block-level elements
2. Add overflow attribute to parent
3. The parent adds the after pseudo element
4. The parent adds double pseudo elements
