The clear property of CSS clears floating usage in detail

What is css clear float?

The popular view on the Internet is that in non-IE browsers (such as Firefox), when the height of the container is auto, and the contents of the container are floating (float is left or right), in which case the height of the container cannot be automatically stretched to fit the height of the content. A phenomenon that causes content to overflow outside the container and affect (or even destroy) the layout. This phenomenon is called floating overflow, in order to prevent the occurrence of this phenomenon of CSS processing, called CSS to clear the float.

Use the clear style to clear
Examples:

. clear-float {Clear:both;}

The clear property is provided by CSS 1 to clear the floating style, the element with the clear property set, and its top border position is rendered against the Margin-bottom boundary position of the floating element, ignoring its margin-top settings. This way, when the parent container height is not set (the value is auto), the actual height of the container is included as a floating element because the defined cleanup floating style element is positioned below the floating element.

Instance
Added P4 in the code and set the width to 300px, gray background color, the code is as follows

HTML code:

<p class= "P4" >    P4   </p>

CSS code:

. p4 {       width:300px;       height:300px;       Background-color:darkgray;   }

The effect is as follows:

1. By the red line is P4, we will find a problem, is that the P4 is still from the top left corner of the arrangement, but the text is not in the upper left corner of the position, this is floating will bring problems.
2. If we want to implement the effect that P4 is affixed to the right side of P2 and P3, we also need to set the Float:left property description for the P4
But we do not want this effect, but want to let P4 in the following rearrange, and not follow P1, p2, p3 they float, this time, we need to clear floating

. p4 {       width:300px;       height:300px;       Background-color:darkgray;       Clear:both;   }

Just add clear:both; properties, you can clear the float.

The effect is as follows:

After clearing the float, the P4 can be arranged from below, and will not participate in the above several P floats. This is known as the clear float.