Understanding the CSS Clear Property

Code on screen

Degui Adil/EyeEm/Getty Images


has been part of

since CSS1. It lets you specify what elements can float beside the cleared element and on which side(s). The

property has five possible values:

  • none
  • left
  • right
  • both
  • inherit

How to Use the CSS Clear Property

The most common way to use the

property is after you've used a

property on an element. For example:

  • Text next to my image.
  • Text that is below my image.

All elements default to

, so if you don't want other elements to float beside something, you must change the


When you are clearing floats, you match your clear to your float. So if you floated the element to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element and everything after it will appear below it on the web page.

If you have elements that are floated to both the right and left, you can clear just one side or you can clear


Using Clear in Layouts

The most common way most designers use the

property is

. You might have an image floating inside a block of text and want the next paragraph to start below the image, or you might have an entire column of text that you want to float beside another bunch of text, with some text appearing below.

Here is the HTML for a layout in this form. It has one div container holding another that is floated to the left.

This will work fine, with the shorter div floating to the left of the rest of the contents of the main div.

You can clear the text next to the floated box by simply adding a tag where you want it to start writing under the floated box.

But the problem comes when the floated box is longer than the contents next to it. Then, as you can see, the background color of the main box is not carried down to the bottom of the floated box.

Luckily, there is an easy way to fix this: the property. By setting the main box to

the background color will remain beside the longer floated box to the very bottom.