Experiments with floats: whats the best method of clearance?
When developing websites there is one thing I have never kept consistent; the method of clearing floats. It seems every project I take, I seem to do it a different way, well Its about time I sorted it all out in my mind.
For those with no clue about what I’m rambling on about, with CSS layouts, when you have a float inside an block-level element, it will collapse in most browsers, since floats have no dimensions. So for instance, if I had a div container with a blue background, and a float inside it, the blue background would not surround the float (and the floats contents), due to the div ignoring the height of the float.
To fix this you need to ‘clear’ the float, so the container recognises the fact the float is there, and adjusts its height accordingly.
There are many methods of doing this, personally in the past Ive used most of them, so in this article I will compare the main ones and rate them in terms of:
- The extra markup
- The Amount of CSS
- Cross Browser compatibility (I’m limited to IE5-7, Opera 9, Firefox)
- Ease to implement
Understanding the problem
To demonstrate the problem, I created a simple test page and ran it in various browsers to show what happens.
Test 1 – No clearing method, container has width
Firefox:
IE7
IE6
IE5.5
IE5
Opera 9
As you can see from the screen-shots, standards compliant browsers (firefox & opera) do not expand the container to contain the floats, whereas IE does.
This is because the container has a width, and in IE this tells the browser the element ‘hasLayout’, making it contain the floats. Making the container have layout is one of the techniques of fixing boxes in IE.
For fairness in the tests, and showing the methods, I will remove the width from the container, as in most cases containers of floats don’t have widths. I for one use a lot of ‘display:blocks’ to avoid setting the width.
Test 2 – No clearing method, container with no width (container inside a wrapper with width).
IE: (all versions did the same thing)
Thats more like it, Firefox and Opera have the same problem (I wont bore you with the screen-shots), but now IE faces the problem also. This is because the container doesn’t ‘have layout’ now, therefore a clearing method is needed.
Before I go into the methods of clearance, Ill just show you the web page & the code:
<?php $text='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
div {margin:0;padding:0;}
p {margin:0;padding:2px;}
div#wrapper{
background-color:#ccc;
width:400px;
}
div#container{
border:3px double #000;
background-color:#999;
font-size:60%;
color:#fff;
}
div#float1{
float:left;
width:48%;
background-color:#4499cc;
border:1px dotted #222;
}
div#float2{
float:right;
width:48%;
background-color:#4499cc;
border:1px dotted #222;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="float1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia viverra mauris. Suspendisse potenti. Pellentesque a tortor in ante pharetra commodo. Aliquam erat volutpat. Nam vel turpis. Suspendisse ullamcorper mattis turpis. Vivamus placerat pretium pede. Aenean consequat. In accumsan scelerisque lectus. Aenean suscipit eleifend nulla. Donec pede. Pellentesque quis diam. Aliquam neque. Fusce facilisis, turpis sit amet congue consequat, enim est dignissim nibh, in tristique lectus enim vitae dui. In pede purus, egestas eget, volutpat sit amet, bibendum non, purus.</p>
</div>
<div id="float2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia viverra mauris. Suspendisse potenti. Pellentesque a tortor in ante pharetra commodo. Aliquam erat volutpat. Nam vel turpis. Suspendisse ullamcorper mattis turpis. Vivamus placerat pretium pede. Aenean consequat. In accumsan scelerisque lectus. Aenean suscipit eleifend nulla. Donec pede. Pellentesque quis diam. Aliquam neque. Fusce facilisis, turpis sit amet congue consequat, enim est dignissim nibh, in tristique lectus enim vitae dui. In pede purus, egestas eget, volutpat sit amet, bibendum non, purus.</p>
</div>
</div>
</div>
</body>
</html>'; echo htmlspecialchars($text); ?>There, now its time to look at the juicy stuff, the methods for clearing the floats.
Method 1: The ‘clear’ property
Using the clear property to clear floats is the method recommended by the W3C, and is one of the oldest methods of fixing floats. However, despite this, it is not the best solution, and does make you add a lot of extra markup to pages.
How it works
To use this method you add an element with the css property ‘clear:both’ at the bottom of the container with the floats inside it. This forces the container to stretch to fill the floats. As you can imagine, a complex layout would need a lot of these clearing elements, with can make the markup bloated & untidy.
Example code
<?php $text='<div id="wrapper">
<div id="container">
<div id="float1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia viverra mauris. Suspendisse potenti. Pellentesque a tortor in ante pharetra commodo. Aliquam erat volutpat. Nam vel turpis. Suspendisse ullamcorper mattis turpis. Vivamus placerat pretium pede. Aenean consequat. In accumsan scelerisque lectus. Aenean suscipit eleifend nulla. Donec pede. Pellentesque quis diam. Aliquam neque. Fusce facilisis, turpis sit amet congue consequat, enim est dignissim nibh, in tristique lectus enim vitae dui. In pede purus, egestas eget, volutpat sit amet, bibendum non, purus.</p>
</div>
<div id="float2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia viverra mauris. Suspendisse potenti. Pellentesque a tortor in ante pharetra commodo. Aliquam erat volutpat. Nam vel turpis. Suspendisse ullamcorper mattis turpis. Vivamus placerat pretium pede. Aenean consequat. In accumsan scelerisque lectus. Aenean suscipit eleifend nulla. Donec pede. Pellentesque quis diam. Aliquam neque. Fusce facilisis, turpis sit amet congue consequat, enim est dignissim nibh, in tristique lectus enim vitae dui. In pede purus, egestas eget, volutpat sit amet, bibendum non, purus.</p>
</div>
<div style="clear:both;"></div>
</div><!--end container-->
</div><!--end wrapper-->'; echo htmlspecialchars($text); ?>Testing
IE 6 (same as IE 5.5-7):
IE 5:
Firefox:
Opera:
As you can see from the results, it cured the float clearance, however there was a small amount of cut off in IE5.
Pros:
- Widely Supported
- Simple to understand
Cons:
- Bloated markup
- Sometimes you get weird results (e.g extra padding)
Overall:
- Browser support: 8/10
- Markup/css bloat: 2/10
- Simplicity: 6/10
- Overall Rating: 5/10
Method 2: Using ‘Overflow’ properties
This is the method I have been using the most, it involves adding a simple css style to the container of the floats; overflow.
This method is really simple, by using either ‘overflow:auto’ or ‘overflow:hidden’, you give the box layout, and tell the browser that it needs to contain the floats correctly. I wont go though overflow:hidden, because it often shows scrollbars (which looks nasty) so I will focus on the (in my opinion) superior overflow:hidden property.
The code
To code, add the overflow property via inline css, or optionally in your stylesheet. I will do it inline:
<div id="container" style="overflow:hidden;">Testing
Firefox, IE7 & Opera cleared float fine.
IE6 and below did not clear the floats.
The reason that IE6 and below did not work is because they still require ‘hasLayout’ to clear the floats. How can we achieve this? By adding a width or a height.
I want to avoid setting width in this example, so I will use a hack to set the height in only IE:
<div id="container" style="overflow:hidden; _height:1%; ">This cures IE 6 and 5.5, so thats all the browsers except, alas, IE5 completely hides the content. A shame. To rectify this (if you care about IE5) you will most likely need to find anther way to give the container ‘hasLayout’, for example setting a width. You could set this up in conditional comments, for just IE5, and also make sure you dont give IE5 height:1%, again by using conditional comments (my article on conditional comments).
For more information on hasLayout visit this great site http://www.satzansatz.de/cssd/onhavinglayout.html.
Pros:
- Good support
- Easy to use
- No markup bloat
Cons:
- A pain to use in IE5
Overall:
- Browser support: 5/10
- Markup/css bloat: 9/10
- Simplicity: 9/10
- Overall Rating: 7/10
Method 3: FnE method
This method is called the ‘Float Nearly Everything’ method. See if yyou can guess what you have to do.
A float which contains a float automatically clears itself, in all of the browsers. This is how it works. Its called ‘nearly’ everything since the main container will not always be floated (if its centered on screen for instance) so it will need to be cleared with one of the other methods (e.g a footer with ‘clear:both’ in it.
I find this method hard to work with, and inconsistent, since using floats everywhere is awkward. Also you have to remember, you must give floats widths for them to work with this method, adding to the difficulty.
Example screenshot of method – Firefox
With patience this method works, but often its not worth the time it takes, when other methods exist.
Pros:
- Can work well
- No extra markup
Cons:
- Complicated
- Takes a lot of time to get right
Overall:
- Browser support: 8/10
- Markup/css bloat: 9/10
- Simplicity: 3/10
- Overall Rating: 6/10
Method 4: Pseudo :after clearfix
This is the method I have been using most recently. It uses a pseudo class (:after) to add an invisible full stop inside the container, which makes the container clear correctly. It also needs some conditional comments to make it compatible with browsers that don’t support :after (IE7) and other older browsers (e.g IE on the Mac).
This method is hard to get your head round, but it works, as I will show soon.
Dissecting the code
The first bit of code needed is some css:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}- The ‘:after’ pseudo class makes the browser apply the style after the content of the element ‘clearfix’ is applied to.
- The ‘content’ attribute makes the browser generate a full stop.
- The ‘display:block’ attribute stops it defaulting to display:inline, which cannot clear elements.
- The ‘height:0′ attribute stops it taking up space.
- The ‘clear:both’ attribute clears the floats.
- The ‘visibility: hidden;’ attribute makes the generated full stop hidden.
Now lets look at some browsers, implementing the code so far. I have simply added a class of ‘clearfix; to the container class like so:
<div id="container" class="clearfix">*note remember, if you need to apply a clear fix to a div with an existing classname, just nest another clearfix div/span inside it, since you cannot have two class names in one div. To have more than one class in a div, seperate the class names with a space (thanks for spotting my error Colin).
Firefox
IE6
As you can see, its all looking hunky-dory in Firefox, however IE6 (and all the other versions of IE) fails to clear the float.
To fix this, we give the container ‘hasLayout’ via conditional comments, we also add a hack to hide it from IE MAC using the holly-hack (I don’t have the resources to test in IE MAC) like so:
<!--[if IE]>
<style>
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
</style>
<![endif]-->IE6 (same in IE5 and IE5.5)
IE7
So thats all version less than, and including, 6 done. But, o no, IE7 wont clear the floats. This is due to the face IE 7 has dropped support for the pseudo :after class, and since the holy hack doesn’t target IE 7 either, the box wont clear.
This is where the display property saves the day. We change the conditional comment code to read:
<!--[if IE]>
<style>
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
<![endif]-->This gives IE7’s clearfix a ‘display:inline-block’, giving the clearfix ‘hasLayout’, and then resets the display property inside the hack for all the other IE versions, solving the error.
IE7
And thats a wrap. All browsers are correctly clearing the floats using the clearfix class.
Pros:
- Good browser support
- Not a lot of extra markup
- Simple to reuse, once implemented
Cons:
- Needs conditional comments
Overall:
- Browser support: 8/10
- Markup/css bloat: 8/10
- Simplicity: 7/10
- Overall Rating: 8/10
Conclusion
Overall, I think that the ‘clearfix’ pseudo method is the best method, currently, for clearing floats. The clear:both method is too bulky, the FnE method is just unnecessary, and the overflow:hidden method can get messy.
Therefore I have decided to use the “clearfix” pseudo class method in future projects, as it seems to balance browser support with ease of use and markup bulk, making it my favorite technique. Blue Anvil now uses this technique (instead of the overflow method I previously used).
I hope this article was useful, and helps you to make your websites.
References / Further Reading
- “How To Clear Floats Without Structural Markup”
- Sitepoint
- “Clearing Floats: The FnE Method”
- Clearing floats without structural markup in IE7
- New clearing method needed for IE7?
Found this post useful? Why not buy me a coffee!
Colin Lewis says:
Like you, I’ve found that .clearfix is the best solution – easy to use, and I’ve placed the .clearfix css code as part of my generic css template so it’s always available to “plug in” as needed.
You’ve misunderstood classes, though. You can use multiple classes on the same element – just separate the classes with a whitespace. Powerful stuff, and endorsed by W3C.
Nice site you got here. Keep up the good work!
/Colin
Comment made on February 9, 2007 at 6:13 pm
Mike J says:
You know what, I feel stupid now, I totally forgot about that, I used more than one class in my hcards. Must have a been a lapse of concentration, so thanks for that, ill edit the article to avoid confusion.
Comment made on February 9, 2007 at 6:14 pm
Colin Lewis says:
You’re probably still suffering from that recent buggy battle with IE…I know that problem solving IE makes my brain shrink at least (in horror, I think).
I’ve added your IE 7 .clearfix solution to my toolbox. Thanks!
Comment made on February 9, 2007 at 6:14 pm
Mike Cherim says:
Nice article Mike. I like how you rated the various methods. I’ve never used clearfix, though I’ve seen it. I guess it’s the way I build by stuff or something because I’ve never needed it.
Comment made on February 9, 2007 at 6:15 pm
Mike J says:
Lol thx Mike.
You are lucky not to need it, before I implemented it, in IE5 all you could see of blue anvil was the header, which wasn’t good, it seemed the entire content collapsed.
Green beast looks great in all browsers, so congrats man
Comment made on February 9, 2007 at 6:16 pm
Aaron says:
Sweet mate, you cured all my woes – IE7 was clearing but the surrounding layout container (floated) was losing bits of its border according to what portion was on the screen when it rendered !?!
overflow sorted that, then a width for IE6 and we’re away!
Now just those pesky IE6 transparent png’s to take care of…
maybe a quick smoke first
thanks, Aaron
Comment made on March 14, 2007 at 10:54 pm
JW says:
I still prefer the bulk of clear:both divs to relying on browser specific hacks.
Comment made on May 15, 2007 at 7:30 pm
IanH says:
Hey Mike,
Thanks for the rundown, very handy. I’m the same as you, always chopping and changing clearing methods.
Just wondering… why not just add the clearfix code into whichever style you want to clear in the stylesheet, rather than adding an extra classname to the markup?
Cheers,
Ian
Comment made on July 11, 2007 at 11:07 am
Mike Jolley says:
I tend not too, because often that would require a lot of bother to update the Conditionals (because I put them in the header most of the time instead of a css stylesheet)…
Comment made on July 14, 2007 at 8:32 pm
RobH says:
Quirksmode prefers overflow with width or height:
http://www.quirksmode.org/css/clearing.html
Comment made on September 25, 2007 at 2:18 pm
Mike Jolley says:
That method always seems to cause jumping content in IE though, thats why I don’t use it that often (not for the main layout divs anyway, I do use it sometimes when floating content within the layout)
Comment made on September 25, 2007 at 2:25 pm
RobH says:
Using the HTML in your example, you can set the container div to have overflow:hidden and width:100%. This appears to work in IE 5 – 7.
Comment made on September 26, 2007 at 11:27 am
Mike Jolley says:
True, but IE 6/5 render widths incorrectly quite often, I believe height:1% works too.
Comment made on September 26, 2007 at 3:31 pm
RobH says:
Using Tredosoft’s multiple IE package, I can at least confirm that using overflow:hidden and width:100% passed the test set by your example, whereas using height:1% failed for IE5 (although I guess that browser is virtually extinct these days).
I imagine that giving a div 100% width that is inside a div of fixed width should be fairly reliable.
Comment made on September 27, 2007 at 10:29 am
Jimmie says:
Hey, I’ve been using overflow: hidden; for a few years now. I wasn’t even aware of the different options available, but I would say that overflow: hidden; is my favorite, it gets the job done quick. I really like the clearfix method, but until we get conditional statements within the css itself, its a pain to use on larger websites.
Also found a typo:
“I wont go though overflow:hidden, because it often shows scrollbars (which looks nasty) so I will focus on the (in my opinion) superior overflow:hidden property.”
That first ‘hidden’ should be ‘auto’ I believe. Great article though!
Comment made on October 10, 2007 at 2:17 pm
Joseph Zimmerman says:
None of the pictures are showing up for me so I have no idea what is going on in this article.
Comment made on November 9, 2008 at 9:06 pm