CSS Float Float Property

First, the related concept introduction

1. Document Flow

The standard document flow for HTML pages (the default layout) is: From top to bottom, from left to right, with blocks (block-level elements) wrapped.

2. Floating Layer

When you assign a value to the float property of an element, you move away from the document stream, floating around the left and right border of the parent element (the default is the body text area).

　　　Precautions:

① floating elements are filled in by a continuous (non-floating) element where the document flow is vacated.

② block-level elements are directly populated, and floating elements overwrite block-level elements if they overlap with the range of floating elements

Second, the source code implementation mode

<!    DOCTYPE html>
Third, the specific process of float realization
　　Note : The view rendering effect is related to the width of the browser.
1, Float:left
1.1 Implementation process for block-level elements
① Code Changes
Div-a Add: Float:left
Div-b Add: Float:left
Div-c Add: Float:left
② view effect of the browser's increasing width
　
1.2 implementation process for mixing inline elements with block-level elements
① Code Changes
Div-b Add: Float:left
Input2 Add: Float:left
div-d Add: Float:left
② view effect of the browser's increasing width
　
　　
2, Float:right
2.1 Float:right is consistent with the Float:left implementation process
　　　2.2　 Precautions :
① the adjacent floating element, the first element of the right property, on the rightmost side.
When ② becomes a floating element, it has an "attribute" of the inline element in the floating layer, and wraps when multiple floating elements are not in a row.
3, height of the elements of varying heights
3.1 Inline elements mixed with block-level elements
Change the height of the div-d before and after the contrast chart
　　　　
　　　　
3.2 Block level elements
4. Conclusion
①height an unequal div floating element, you still have an "attribute" of the inline element, and when multiple floating elements do not fit in a row, the line wraps.
When ② becomes a floating element, it has an "attribute" of the inline element in the floating layer, and wraps when multiple floating elements are not in a row.
　　　　　
　　
CSS Float Float Property