CSS clear

The clear property in CSS specifies which side of an element where floating elements are not allowed to be positioned. This can be useful when you want to prevent elements from overlapping or wrapping around floated elements.

There are several values that can be used with the clear property:

none: No clearing will be applied.
left: The element will clear any left floating elements.
right: The element will clear any right floating elements.
both: The element will clear both left and right floating elements.

Let's take a look at some examples to understand how the clear property works.

Result:


    <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
    <div style="float: right; width: 100px; height: 100px; background-color: blue;"></div>
    <div style="clear: both; width: 200px; height: 100px; background-color: green;"></div>

In this example, we have three <div> elements. The first two are floating elements, with one floated to the left and the other floated to the right. The third <div> has a clear: both; property, which clears both the left and right floating elements. This prevents the third <div> from wrapping around the floating elements and creates space below them.

Experiment with different values of the clear property to see how it affects the layout of your elements.