1. When placing the floating box, avoid the regular flow box;
2. When placing the regular flow box, ignore the floating box;
Note: When floating is set, the floating box will **disconnect from the document flow**; the document flow Indicates that the content of the floating element does not occupy the parent area (content);
the document detachment will cause the height to collapse; (because the regular flow box will ignore the floating box)
to solve the document collapse in addition to using (overflow: hidden;) to retrieve the collapsed height; you can also Retrieve the collapse height with clear float(clear:both;)
Regular flow meets float
Clear Float : Clear the float for an element, so that the element appears below the floated element when placed
The clear property
is not inheritable
Default value: none
Value: none (do not clear the floating)
left (clear the left floating, the element is placed under the left floating box)
right (clear the right floating, the element is placed under the right floating box)
both (Clear left and right floats, placed under the box where the element floats)
Note: Use (clear: both;) on the last child element to prevent the height of the parent element from collapsing
Visual Formatting Model - Floating: When the value of the element's float property is left or right, the element belongs to floating positioning
Attribute float
cannot be inherited
Default value: none
Values: none, left, right
The auto (auto) value property in the box model :
margin-left:auto;
margin-right:auto;
margin-tpo:auto;
margin-bottom:auto;
width:auto;
height:auto;
float:
0px
0px
0px
0px
fit content width
fit content height