DEV Community

Cover image for How does the clear in CSS work?
Jasmin Virdi
Jasmin Virdi

Posted on

How does the clear in CSS work?

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

Let's understand this with the help of an example.

We will consider four blocks red, yellow, blue and green which will be added one after the other and they all will be placed at same level.

Adding blocks

Then we will make each element float to left one by one which means they will be moved one level above their initial position. This will allow other non floating elements to wrap around the floating element.

floating blocks

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

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

Clear blocks

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

Values accepted in clear property.

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;
Enter fullscreen mode Exit fullscreen mode

You can find the code here

I tried to cover the working of CSS clear property using a basic example for better understanding. Please share your examples and feel to add up to this post 😊

Happy Learning!πŸ‘©πŸ»β€πŸ’»

Top comments (5)

andrewbaisden profile image
Andrew Baisden

Thats a great explanation thanks for taking the time to explain it.

jasmin profile image
Jasmin Virdi

I am glad you liked it!😊

andrewbaisden profile image
Andrew Baisden

I can appreciate good content.

joelbonetr profile image
JoelBonetR πŸ₯‡

Hi! Nice GIFs πŸ‘ŒπŸ˜

amircahyadi profile image
Amir-cahyadi • Edited

Nice ❀️, how to make it your gift?