A Better Way To Clear Floats

[grabenair]

Here is a better way to clear floats then the way we are used to.

/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before,
.cf:after {
   content:"";
   display:table;
}
.cf:after {
   clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
   zoom:1;
}

 

Just add the .cf class to anything that needs clearing. You can copy and paste all this in your css and done.

Edited May 8, 2013 by grabenair

[Andrea]

What makes this better?

[grabenair]

I was trying to think of a good example as to why it is better. I thought of one this morning while drinking my coffee. Remember the scuba site that you made where you was having that float problem, where you said it always worked before. Well this would have fixed that problem if I would have known about it then. If you remember I said that I have had problems with the clear float sometimes and thought it was a html5 thing but was not for sure. Since I have been using this I have had no problems.