float in CSS

The float (float) of the CSS moves the element left or right, and the elements around it are rearranged.

The horizontal direction of the element floats, meaning that the element can only move left and right without moving up or down.

A floating element moves as far as possible to the left or right until its outer edge touches the bounding rectangle of the containing box or another floating box.

Elements that follow the floating element will surround it.

Elements before the floating element will not be affected.

If the image is floating right, the text stream below will wrap around it to the left.

If you put a few floating elements together, if there is space, they will be adjacent to each other.

After the element floats, the surrounding elements are rearranged, in order to avoid this situation, use the clear property.

The Clear property specifies that no floating elements can appear on either side of the element.

Because the floating child element is detached from the document flow and no longer occupies the parent element's space, the parent element has no height

float in CSS