Clear Property In CSS

CSS Clear Property

Hello and welcome back.

In this lesson, I’m gonna talk about another property in CSS called clear property and it goes along

with the float property because it controls the impact of the float property so remember we had an image

and a paragraph.

And when we said the float property of this image to left then the paragraph it wrapped around it.

So this way when we wanted to apply any float property to this image the other element also got impacted

and it started wrapping around the previous element now.

Sometimes we may be happy with that but sometimes we may not really want that so in that case we can

use the clear property and can avoid any element to float on the left or on the right side of an element

or even from the board side.

So let’s dive in and get started.

So in order to use the clear property, we have to type clear and then we can use any of these options.

The first one which is the default value is None which means it should not clear any element from floating

on the left or on the right.

That is from either side.

And then we can set the value as left both or right the left one prevents any element to float on the

left the right one prevents any element to float on the right and the value when setting to both.

It prevents both the sites and then we have the same initial and inherit values.

So let’s go through the document and see where we can use these options so here we have this image and

a paragraph.

I again go back over here and then for this image let’s set the float property and I’m gonna float it

to left

and as a result the paragraph it’s wrapping around it.

So what happens is that this paragraph by default it is letting any element to float on the left and

it’s the clear property it’s set to None.

So if we pick up this paragraph and then we set the clear property and set it to left and this time

it’s gonna clear any element that is floating on the left.

So if I refresh the page we can see that the paragraph has now come down.

So the reason it has come down is that it is not letting any element to float on the left.

And if any element that is floating on the left it’s not really gonna be on the same line.

It’s gonna come down on the next line.

Now when we have set the value as left then it’s only gonna prevent an element to float on the left

but if he said the float property too right that means this image is now going to float to the right


CSS Clear Property
CSS Clear Property

So if I reload the page now then we can see that this paragraph has again come up because we have set

the clear property only for the left.

That means it’s not gonna let any element float on the left but doesn’t mean that it won’t let it float

on the right either.

It’s actually letting it float on the right.

So here if I said the clear property to write and if I reload the page again and we can see it has again

come down.

But again if I set it back to float left then it’s again going to come up.

So in this case when we don’t want any element to be floating on the left or on the right and we can

set the value as both if I now reload the page then we can see that it comes down because it doesn’t

let any element float on the left.

If I set it to write then it’s again gonna stay below that because it doesn’t support any element floating

on the right side either.

So that’s the advantage of using both as the value so this clear both is exactly what I used in the

the previous lesson as well when the elements had shifted up because of the image getting floated to the right

or because of the def getting floated to write.

However in that case I added an element that was an element without any content.

It was a def element and then to that of element I applied the clear property.

Why did I do that?

Then I can simply put this clear property to the next element itself.

Why do we need to add an empty element?

Well, suppose that you really don’t want any clear property for this paragraph.

Maybe there are some other elements that you want to add.

So in those cases, you probably may not really want to apply a clear property and set it to both.

Maybe you want only a clear property to right or left.

So, therefore, we can simply add an element without content and then we can set the clear property to


That’s a common method that we also call clear fixed.

So you can use this clear property when you want to load an element but you don’t want the other elements

to be wrapped around it or you probably don’t want an element floating on either of the sides.

Also, Read –

Leave a Reply

Your email address will not be published. Required fields are marked *