CSS Clear Float

Why to clear floating

Floating floats is a layout in CSS where the render position is between the line box and the containing block, so that the text in the row box does not overlap with the floating element and is surrounded by it, and it is often used in the layout process to achieve the effect of the left and right side-by layout, but because of the floating characteristics, If the container does not explicitly set the height, it will be set according to the height of the elements in the normal flow, which will cause floating elements out of the normal flow to overflow the container, affecting the layout of the elements thereafter.

Clearing the floating clear property with the clear style does not allow floating elements to be cleared on the left/right side of the floating element, and the underlying principle is to add enough clear space above or below the element that is cleared to float.
Note that we do this by clearing the float on another element, rather than on a floating element. code in HTML

Code in CSS

CSS Clear Float