CSS Clear

The clear property is used to cancel the effect of float. Possible values of the clear property are:

left: keeps the left side clear.

right: keeps the right side clear.

both: keeps both sides clear.

none: does not keep either side clear.

inherit: inherits the clear setting from the parent element.

initial: sets the clear setting to the default value.

Let's take a look at some examples. All examples use the following CSS:

CSS declaration:

#left-float {
float: left;
width: 50%;
background-color: red;
}
#right-float {
float: right;
width: 40%;
background-color: yellow;
}
#clear-left {
clear: left;
background-color: brown;
}
#clear-right {
clear: left;
}
#clear-both {
clear: left;
background-color: green;
}

Example 1

The HTML code below,

<div class="left-float">This is the first sentence.</div>

<div class="right-float">This is the second sentence.</div>

<div class="clear-both">This is the third sentence.</div>

renders,

This is the first sentence.

This is the second sentence.

This is the third sentence.

In this case, we cleared both the left float and the right flow, so the third sentence starts below both the first sentence and the second sentence.

Example 2

If we do not specify 'clear-both', the layout would look very different:

The HTML code,

<div class="left-float">This is the first sentence.</div>

<div class="right-float">This is the second sentence.</div>

<div>This is the third sentence.</div>

renders,

This is the first sentence.

This is the second sentence.

This is the third sentence.

In this case, we did not clear either float. Therefore, the third sentence starts in the first available space it can find, which in this case is the 10% gap between the first sentence and the second sentence.

Example 3

What if we only clear the float in one direction? Let's take a look at what happens if we only clear the left float:

The HTML code below,

<div class="left-float">This is the first sentence.</div>

<div class="right-float">This is the second sentence.</div>

<div class="clear-left">This is the third sentence.</div>

renders,

This is the first sentence.

This is the second sentence.

This is the third sentence.

When the left float is cleared, the third sentence starts directly below the first sentence, which had a left float applied to it, but not the second sentence, which had a right float applied to it.

Next: CSS Cursor

AdBlock Detected!