Dave Woods - Freelance Web Design Warwickshire

Float and Clear: A comparison of CSS clearing techniques

I’m sure that anyone who is involved with CSS development will have had to clear floated elements at some stage, but what different techniques can be used and more importantly which one prevails over the others?

We’ll start with a little bit of sample code so that we can see the problem in action…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>Clearing Floats</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* { padding: 0; margin: 0; }
body {
font-size: 100%;
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
}
#container {
font-size: 0.8em;
padding: 10px;
background-color: #CCC;
}
h1 { font-size: 1.2em; }
h2 { font-size: 1em; }
* html #container {
height: 1%;
}
#main-content {
float: left;
width: 200px;
background-color: #9999CC;
padding: 10px;
}
#additional-content {
float: left;
width: 200px;
background-color: #666699;
padding: 10px;
}
.clear { clear: both; }
</style>
</head>
<body>
<div id="container">
<div id="main-content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
</div>
<div id="additional-content">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
</div
</div>
</body>
</html>

As you’ll notice in the following image, the container fails to expand to wrap around the main-content and the additional-content div’s.

Image to demonstrate the problem when float's aren't cleared

This is expected and you should get consistent behavior in all browsers but the next question is, ‘how do we fix the layout?’.

Using a ‘clear’ Class

This is probably the most common method but does require some extra markup.

If we add an extra element immediately after the final clear then we can add a style to this which forces the content to clear and enables the container to wrap it’s children

HTML
<div id="container">
<div id="main-content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
</div>
<div id="additional-content">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
</div>
<div class="clear"></div>
</div>

CSS
.clear { clear: both; }
* html #container {
height: 1%;
}

Please note: The extra rule which applies a height of 1% is required to fix “hasLayout” for IE6 and below. If a width or height is already applied to the #container within the main style then this won’t be needed.

Easy Clearing Method

The easy clearing method doesn’t require any extra markup as in the previous example and simply inserts a hidden “.” which is used to clear the content.

Source: Position is Everything

#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #container {
height: 1%;
}

Simple Clearing of Floats

But there’s an even easier method which I’ve picked up from Paul O’Brien and was first documented to my knowledge here:

Source: SitePoint

This method simply involves adding overflow to the parent element that needs to contain the floated element and works using the following code.

#container {
font-size: 0.8em;
padding: 10px;
background-color: #CCC;
overflow: auto;
}
* html #container {
height: 1%;
}

And that’s it. No extra markup is needed and as long as a dimension is served to IE6 and below it will work from IE5 and upwards as well as all the latest browsers.

Since learning this method of clearing float’s it’s certainly made my CSS that little bit cleaner and removed any elements from the page that aren’t required for content so I hope it helps a few other people.

12 comments on “Float and Clear: A comparison of CSS clearing techniques

  1. Pingback: Make It Up As You Go » Blog Archive

  2. Gabi Jguma

    The overflow method doesn’t seem to work as you expect it to, because it makes scrollbars appear on the div.

    At least, that’s what my testing has revealed.

    Can you please update your post with some relevant html/css demos? Maybe i am missing something.

    Thanks

  3. Dave Post author

    Scrollbars will only usually appear if you’ve set a width/height on the container but the floated elements inside this container take up more space.

    You could also use overflow: hidden; to the same effect but there is probably an underlying reason why the scrollbars are appearing that I’d personally want to fix.

    Feel free to drop me an email (details in the contact section) with some sample code and I’ll be happy to take a look at it for you.

  4. Gabi Jguma

    Dave, indeed, overflow: hidden; should do the trick, and clear the scrollbars … but unfortunately, won’t resolve the problem of contained elements that actually need to overflow the div (let’s say you might need an element that will require to stick 1 px out of the bottom of the cleared div) as they will be trimmed (hidden).

    Other than that particular situation, i think the technique is safe to use, and is definitely a “lighter”, and more semantically correct and intuitive solution than others.

  5. Dave Post author

    Hi Gabi,

    I’m not sure of a situation where you’d want overflow at the bottom of a div and if you did this it wouldn’t be supported by IE6 as the box would simply expand and treat height as min-height instead.

    A better solution would be to use a negative top margin on the following element to pull it back in if required but I wouldn’t have thought this was necessary and would need to see an example of the layout that was trying to be achieved as absolute positioning is usually a better solution when things need to overlap rather than relying on any overflow.

    Hope that makes sense?

  6. Gabi Jguma

    Hey Dave, i was actually working at a project that required clearing, and i put together a simple version of the page, to see what i mean.

    One situation where you would need some element to overflow the containing div, would be a tabbed navigation(like the one in the example below.)

    You are right that IE6 would frown, but not if you use absolute or relative positioning, and a negative bottom(margin-bottom).

    http://www.spine.ro/overflow.html

    Check out the code of the example.
    It uses clearfix to make the navigation go one pixel below.

    Save the page…take out the clearfix class applied to the #header div, and add overflow hidden or auto (delete the x in front of teh rule to activate it), and see what you get.

  7. Dave Post author

    Thanks for the link Gabi, that makes more sense.

    There’s obviously nothing wrong with the way you’ve done that but an alternative would be to float the parent as well and then just clear the float on the content that follows. Here’s an example:

    http://dave-woods.co.uk/wp-content/uploads/2007/12/overflow.html

    There’s lots of different ways of achieving the same thing using CSS though so it’s just about selecting the method you prefer.

    Also, I’m obviously just dealing with the code you provided so I understand that this may not work once the rest of the code has been considered but it is another option.

    Thanks for your comments :)

  8. Gabi Jguma

    Dave, indeed, that is another way to do it, but, there might be situations where you just can’t float the parent(or can’t clear the following element), and will have to clear the parent somehow.

    Obviously, clearfix does the job in such a situation, and overflow doesn’t!

  9. Dave Post author

    I completely agree. It all comes down to personal preference and as long as it doesn’t involve introducing extra markup for the sake of it then it doesn’t really matter which solution you decide to use ;)

  10. Pingback: Dave Woods - Freelance Web Designer UK » Queen’s website HTML/CSS Review

  11. Pingback: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know