What is the clear property in CSS?

Overview

The clear property works with respect to float property. It determines whether an element must be moved below the floating elements that precede it.

Example

Let's understand the clear property with an example.

1. Consider four blocks red, yellow, blue, and green, which are to be added one after the other. All these blocks will be placed at the same level.

Adding blocks

2. We make each element float to the left one by one, which means they'll be moved one level above their initial position. This allows other non-floating elements to wrap around the floating element.

floating blocks

The next block will occupy the position of the floating block due to which it is not visible. When we change the dimension of the next block we observe that it is covered with a floating block which is present one layer above it

3. After this, we apply clear:left to the blue block, which means that no element will be floating to the left of the blue block.

Clear blocks

With the help of the clear property, we can specify which side of floating elements are not allowed to float. It sets or returns the position with respect to the floating objects.

Values accepted in the clear property

Let's have a look at the below example:

Explanation

We create 4 <div> elements wrapped inside the parent wrapper. Each <div> represents the colored blocks, which are red, yellow, blue, and green.

In the CSS file, we assign the float:left property to each block along with clear:both assigning it to the blue block. This helps to show the correlation between the float and clear property and position element with respect to it.