Published in: CSS
|
|
|
".clearfix" is the container that holds all of your floated elements. Works in all browsers that support "float" and "clear".
Expand |
Embed | Plain Text
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.
That is the old clearfix. Here is the new one. Sorry, you'll have to google it for more information as I don't remember where I came across it. It fixes a bug with the period and also adds support for FF3.
/* This needs to be first because FF3 is now supporting this */ .clearfix {display: inline-block;}.clearfix:after { content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden; }
/* Hides from IE-mac */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
ugh sorry about the formatting, let me try again.
nice...
I've become addicted to the inline-block way of laying things out lately. Then you don't have to worry about clearing anything. Just add the following style with a width assigned to it and make sure all your div html is inline and it works great. If you have extra space your divs/elements are coded inline.
Not Inline
Inline
CSS Code
I've become addicted to the inline-block way of laying things out lately. Then you don't have to worry about clearing anything. Just add the following style with a width assigned to it and make sure all your div html is inline and it works great. If you have extra space your divs/elements are coded inline.
Not Inline
Inline
CSS Code