The Clear property of CSS

The following references are from W3school

The clear property defines the side on which the element is not allowed to appear floating elements. In CSS1 and CSS2, this is achieved by automatically increasing the upper margin for the purge element (that is, the element that has the clear attribute set). In CSS2.1, the clearance space is increased above the outer margin of the element, and the margin itself does not change. Either way, the end result is the same, and if the declaration is left or right cleared, the element's Sisu border boundary is just below the margin of the floating element on that edge.

value	Description
Left	Floating elements are not allowed on the left side.
Right	Floating elements are not allowed on the right.
Both	Floating elements are not allowed on the left or right sides.
None	The default value. Allows floating elements to appear on both sides.
Inherit	Specifies that the value of the clear property should be inherited from the parent element.

Situation one: DIV1 (gray) left floating DIV2 (blue) right floating

float: left; width:200px; height:200px; background-float: right; width:200px; height:200px; Background-color: #0088cc; }

DIV2 when using Clear:left, clear the float to do the effect

DIV1 clear:right or Clear:both, can not clear right floating.

Case two: DIV1 right floating DIV2 right floating

float: right; width:200px;height:200px;background-float: right; Width:200px;height:200px;background-color: #0088cc;}

DIV2 Clear:right; Clear the floating on the right

DIV1 clear:right or Clear:both, can not clear the right floating

Case three: DIV1 right floating DIV2 left floating

float: right; width:200px;height:200px;background-float:left;  }

DIV2 Clear:right, clear the right float

DIV1 Clear:left or Clear:both, can not clear left floating

Situation four: DIV1 left floating DIV2 left floating

float: left; width:200px;height:200px;background-float: left; Width:200px;height:200px;background-color: #0088cc; }

When DIV1 with Clear:right, can not clear floating, when DIV2 with Clear:left, clear left floating

Conclusion:

Clear is based on the top boundary of the purge occurs. There are no other labels on the top of this example DIV1, and no DIV2 floats can be cleared in any direction. The next element, DIV2, can determine whether the previous element has floated, and the following label is moved below because of the clear float.

The Clear property of CSS