Some things to learn about CSS (bottom)

2. Float (float)

Float (float) Features: 1. The element moves left and right until it touches the container.

2. Set the floating element, still in the standard document flow.

3. When the element does not have a width value set, and the Float property is set, the width of the element changes as the content changes.

4. When an element sets a floating property, it has an effect on the neighboring element, especially adjacent to the next element.

　　　　　　　　　　　

Common methods to clear floating: 1.1, clear properties: commonly used claer:both; Clear:left; or clear:right;
1.2, at the same time set width:100% (or fixed width) +overflow:hidden;
Note: 1.1.1, add the above properties for the element that is affected by the float to clear the float.

1.1.2, empty tags <br></br> meaningless, this method is not recommended for clearing floats.

　　　　　　　　　　　

Floating Layout Example: Horizontal two-column layout

Related knowledge Points: Float property: The block-level elements arranged vertically, arranged horizontally.

Margin property: Sets the spacing between two columns.

：

　　　　　　　　　

3. Absolute positioning layout

3.1, by setting the Position property implementation
3.2, the third kind of positioning mechanism stipulated in CSS
3.3, can realize the horizontal multi-column layout and more complex positioning
Position property
1, has 3 kinds of positioning forms: (1) static positioning (2) relative positioning (3) Absolute positioning
2, can be set 4 property values: Static (stationary positioning) | Relative (relative positioning) | Absolute (absolute positioning) | Fixed (stationary positioning).

3.2.1 Relative positioning features: 1. Offset relative to its original position.

2. Still in the standard document stream.

3. The offset and Z-index properties are immediately

3.2.2 Absolute Positioning features: 1. A unit with a block as its base is established

2. Completely out of standard document flow.

3. The offset and Z-index properties are immediately

3.2.3 No offset feature: regardless of whether a positioned ancestor element exists, it remains at the initial position of the element, but is out of standard document flow.

3.2.4 Setting the Offset

Absolute positioning Layout Examples:

　　　　　　　　

Some things to learn about CSS (bottom)