At my beginnings as a web developer, when I first discovered how to clear floats I was so happy and it was for sure an “a-ha” moment. Since then, so many things have changed and new clearing methods have appeared. One thing remained the same: the need to clear floats.
In this article, we’ll see some effective solutions for clearing floated elements.
But first, what is float?
Arranging website page elements was always a struggle for you as a web developer. To achieve your desired website layout, a lot of calculation of box dimensions are needed, and various implementation decisions must be taken as well.
At the beginning, perhaps you used table elements to structure your layout, and even if tables are very intuitive, the table purpose is to list tabular data. You also tried the CSS display values like: table, table-cell or table-row to build structures, but shortly you gave up as there wasn’t enough support for that.
In the end, you got rid of table markup and skipped to div floats.
So, float is a CSS property which help you aligning and positioning your web page elements.
Simple floats example
Clearing floats
Elements placed after a floated element will wrap around the floated element. To avoid this behavior, you must clear floats. To do that, generally you use the clear property which has four values: left, right, both and none.
<div style="float:left"></div> <div style="float:right"></div> <div style="clear:both"></div>
The above is a common example.
Beside the above example that requires extra HTML markup, below is a list with some clearing methods that I found very useful (and they do not require extra markup):
Clearfix reloaded by Thierry Koblentz
.clearfix:before,
.clearfix:after
{
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */New clearfix hack by Jeff Starr
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Micro clearfix hack by Nicolas Gallagher
.cf:before,
.cf:after
{
content:"";
display:table;
}
.cf:after
{
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf
{
zoom:1;
}
CSS clearing floats with overflow by Nick La
That’s it!
You may already know the above techniques and my questions is: Which one do you use most? Share your opinion with us!
Nice list of clearfix methods widely used. I recommend using micro clearfix method as its been revolving around the web now-a-days, even HTML5BoilderPlate also included micro-clearfix.
I strongly recommend not blindly following what the HTML5 Boilerplate does. It’s not much more than a dumping ground of hacky, clueless experiments.
I use the overflow, since it’s not a hack and doesn’t require special IE handling.
A lot of people use the other methods, not understanding why they need to. If you understand why overflow:auto works then it makes more sense to use it.
Overflow:auto all the way, much simpler and works in most cases.
People should just stop calling it clearfix… as it’s simply not one. A fix is some way to repair something that doesn’t work as it’s supposed to. In the case of floats, the behaviors were always clear and well-defined by the standard.
Floats were never meant to be used to create columns but to make text wrap some container. It was the lack of real CSS support for columns that forced us to use them for that purpose. Short story… floats are fine, we’re just misusing them. To some extent… we could say floats are the s of CSS, being used like we used tables a few years ago to create layouts because we had no other alternative.
In my case, beside some very rare exceptions, I use “overflow” to create a new box formatting context because I think it’s cleaner. It doesn’t pollute the markup with non-semantic classnames such as “clearfix” and it doesn’t require the creation of useless pseudo-elements to apply the “clear” property. We only have two pseudo-elements per element so… better keep them for something more useful.
Thanks
Edit:
…we could say floats are the tables of CSS…
I agree that using overflow is cleaner. I use it when possible. Unfortunately it can cause some things like box shadows to be clipped by the container. That’s when I use one of the above techniques.