CSS Clear Floating Clear property

CSS Clear Float

The clear property is used to set which side of an element is not allowed to have other floating elements (rather than canceling the float of the element).

The possible values are as follows:

Take value	Description
None	Default value, allowing floating elements on both sides
Left	No other floating elements are allowed on the left
Right	Other floating elements are not allowed on the right
Both	Other floating elements are not allowed on either side

Example:

#div2 {    float:left;    Clear:both;}

Imagine a situation where a div contains content that floats, leaving the content out of the document stream, causing the div to actually contain no "content", as shown in the image on the left:

How do you visually include content in a div like the right image? In particular, the div must contain the content when it is shown in the border.

There are usually two ways to resolve this problem:

One, add a div without any content and float it:

<div class= "Clear" ></div>

. clear{    Clear:both;}

This is a meaningless label added for the layout effect, and in fact many sites have adopted this strategy, but this strategy leaves meaningless "junk" tags.

Second, the container Div is also floating, so that it becomes a block-level element.

This achieves the goal, but the next element is affected by the floating element. In fact, the strategy is to float all the elements in the document, and then clean up the floating elements in the footer where they are meant to be laid out for layout purposes.

CSS Clear Floating Clear property