Skip to main content

How to clear floats with the CSS clear property

Submitted by helen on Wednesday, April 1, 2009 - 23:03; Modified on Thursday, August 25, 2016 - 15:39

The CSS clear property is used to clear floated block elements.

  • clear:left will clear any elements floated to the left of your element
  • clear:right will clear any element floated to the right of your element
  • clear:both will clear elements floated both on the left and right of your element

Note: the item that you apply the clear property to does not need to be floated. But the item(s) you wish to clear, obviously, do.

An example of using clear:left

If you have a gallery containing thumbnails and you want to split them up into rows (for whatever purpose), you might resort to programming. With a server-side language you can use the modulus operator (%) on your recordset to calculate where to open a div and where to close a div, so the end result is separate rows, containing however many images you specified. But there's an easier way to accomplish this, and it doesn't require creating rows of divs.

Introducing clear:left

The CSS clear:left property will clear anything that is floated left and comes before the cleared element in your markup. So if you have a several elements floated to the left and you want to insert a break somewhere, all you need to do is place clear:left on the element that you want to be at the start of your new line. This will shift that element and everything after it onto a new line.

CSS Example:


img {
	float:left;
	margin:5px 5px 0 0;
	display:block;
}

.break {
	clear:left;
} 

HTML Example:


<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3" class="break">
<img src="image4.jpg" alt="Image 4">

XHTML Example:


<img src="image1.jpg" alt="Image 1" />
<img src="image2.jpg" alt="Image 2" />
<img src="image3.jpg" alt="Image 3" class="break" />
<img src="image4.jpg" alt="Image 4" />

Result:

Tomb Raider Underworld: Screen 1 Tomb Raider Underworld: Screen 2Tomb Raider Underworld: Screen 3Tomb Raider Underworld: Screen 4

Images courtesy of Tomb Raider Chronicles.

I have used four images for the purpose of this example, so you can see the clear property, which has been placed on the third image, in action.

Something to keep in mind is — and may make this gallery example redundant — if your images span the whole width of your container, they will naturally break where appropriate. So you may not need to bother with clearing. The reason I have mentioned it is because there may be times when you won't want your images to fill their container horizontally. For these instances, cleat:left is a useful piece of CSS to know.

IE and clear:left

Internet Explorer 6 and 7 do not render clear:left correctly. They will drop our cleared element onto a new line, but will shift the element beside the cleared element, onto the line above. This bug can be seen in the screenshot below.

WTF? Thanks, IE, that's really useful!

Note, on mobile devices, you may need to click on the image above and swipe/scroll across, in order to see the full image.

To rectify this, I created a class called ie and gave it a float:none. This class, when applied to the image before our break, cancels the float on that image, shifting the image after our cleared element down to where it should be. In essence, it makes the clear behave as it should.

Here's our code from above, but including the IE fix: a class called .ie, which is applied to image 3 in the (X)HTML Examples.

CSS Example:


img {
	float:left;
	margin:5px 5px 0 0;
	display:block;
}

.break {
	clear:left;
}

.ie {
	float:none !Important;
	padding-top:5px;
}

The !important is there to override the float on the img tag. For more on how to use !important visit my tutorial A Beginner's Guide to CSS | Part Four - The CSS Order of Precedence.

HTML Example:


<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2" class="ie">
<img src="image3.jpg" alt="Image 3" class="break">
<img src="image4.jpg" alt="Image 4">

XHTML Example:


<img src="image1.jpg" alt="Image 1" />
<img src="image2.jpg" alt="Image 2" class="ie" />
<img src="image3.jpg" alt="Image 3" class="break" />
<img src="image4.jpg" alt="Image 4" />

All you need to do is place the .ie class on the element that comes before your cleared element, and it will make IE behave!

You may have noticed I also added a padding of 5px to the ie class. This was because the float:none does away with the margins added to our images. The only may to get that back, so as the ie image didn't look skewered, was to add a padding to its top with the same value as the margin-top on the other images.

The IE fix in action

There, much better!

To be authentic, the above is a screenshot taken in IE. On mobile devices, you may need to click on the image above and swipe/scroll across, in order to see the full image.

How would we have accomplished this?

We would have accomplished this by breaking the images off into separate rows of divs. If your images aren't the same height, you're better off doing it this way, otherwise your images will look rather odd, as they won't be aligned straight.

An example of using clear:right

Suppose you want to include a couple of images in the text on your website. But here's the catch: you want both images to be floated right and to be positioned one underneath the other. You could accomplish this by placing the images in a container and then floating the container right. But there is an easier way.

Introducing clear:right

The CSS clear:right property will clear anything that is floated right and comes before the cleared element in the markup.

Remember, the element that you clear does not need to be floated.

CSS Example:


img {
	float:right;
}

.clear {
	clear:right;
} 

HTML Example:


<img src="imageone.jpg" alt="Image One">
<img src="imagetwo.jpg" class="clear" alt="Image Two">
<p>Your text...</p>

XHTML Example:


<img src="imageone.jpg" alt="Image One" />
<img src="imagetwo.jpg" class="clear" alt="Image Two" />
<p>Your text...</p>

We apply a float:right to both images, and then clerar:right to the image we want to go underneath. This floats our images to the right of our text, stacking them one underneath the other. First, let's look at how not to do it.

The wrong way:

Chris Redfield: RE5 Jill Valentine: RE5

It is important to note that anything you want to clear must come before your cleared element, within your HTML, otherwise the outcome will look like this example. Here, the clear:right is on the image which comes first in the code (which is hard to see, but is the image to the right), because you may think this will clear anything floated after it. But this is not how it works. clear:right will only clear right floating elements that come before the element that is to be cleared.

The right way:

The right way is to add clear:right to the bottom image.

Chris Redfield: RE5 I know, Jill does look good as a blonde!

In this example, we have placed a clear:right on the bottom image, which will clear any right floats that affect it, thus shifting it onto a new line.

Note, the Resident Evil images are courtesy of Capcom.

How would we have accomplished this?

We would have accomplished this by wrapping the two images in a container div, which would be floated to the right. But, as you can see, clearing the float is a more convenient way of accomplishing the same thing.

It would, however, still be necessary to use a container if you wished to add captions to your images.

An example of using clear:both

clear:right and clear:left have limitations. Namely, they will only act on floated items of the same direction. For instance, clear:right will only clear items with a float:right applied to them; clear:left will only clear items with float:left applied to them.

There are no such limitations with clear:both. It will clear both sides, regardless of the floats surrounding it.

Onto an example...

Suppose you have a simple layout with main content, and navigation. The main content is floated to the left, and the navigation is floated to the right, because you always want it to but up against the right-hand side of your screen. You want your footer to sit underneath the main content and navigation, but you cannot clear the right side of the navigation, because the footer is not floated right, and, most importantly, does not come before the navigation in the code. So what do we do? We apply clear:both to the footer.

Introducing clear:both

The CSS clear:both property will clear anything that comes before and after an element.

Remember, the element that you clear does not need to be floated.

Let's look at a working example of our simple layout mentioned above.

CSS Example:


#main {
	width:70%;
	float:left;
	margin-bottom:10px;
}

#nav {
	width:20%;
	float:right;
	text-align:right;
}

#footer {
	clear:both;    
}

(X)HTMl Example:


<div id="main">
	<ul id="nav">
		<li>Item One</li>
		<li>Item Two</li>
		<li>item Three</li>
	</ul>
	<div id="footer">Footer</div>
</div>

Result:

  • Item One
  • Item Two
  • Item Three
Footer

How would we have accomplished this?

Without the clear both, we would have accomplished this by placing the main content and navigation into a container div, and then placing our footer underneath this.