Published in: CSS
".clearfix" is the container that holds all of your floated elements. Works in all browsers that support "float" and "clear".
.clearfix { display: inline-table; /* Hides from IE-mac \*/ height: 1%; display: block; /* End hide from IE-mac */ } html>body .clearfix { height: auto; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
Comments
Subscribe to comments
You need to login to post a comment.

Aw, I see a hack :(
Although, it's not a real problem, as IE-Mac isn't supported anymore (I think?). No issue.
Love it.
I don't believe IE6 supports the psuedo class :after with the insertion of "content: '.' " Please check this in IE6 before using it.
it WORK on IE6 thx alot.
just use an overflow and 'hack' the height for IE:
.clearfix {overflow: auto; _height: 1%;}
I would actually recommend not using any hacks, as clearing can be totally achieved without any special classes OR hacks.
divtryingto_expand {
height: auto; overflow: auto; }
There are a few places where this method doesn't work: 1. when a child within this parent div is absolutely positioned outside of the border of the parent div 2. if a child within this parent div has a floated child that is not being cleared, and causes the child of the child to extend outside of the parent div
Hope this helps!
if you're just trying to clear floats, I define the following:
/it's normally a good idea to wrap two floats, as semantically you could argue they're associated anyway/ .wrap { overflow:hidden; width: 100%; /important to define a width - the simple .class allows for easy overwrite/ } simple.
While this does work in some circumstances, there are some instances involving more complex markup that it will not work with. Due to these inconsistencies, I prefer to stick with the tried-and-true method of using clear divs.
Neat snippet, though.
This code was clearly explained in "CSS Mastery" book by Andy Budd and Cameron Moll.