Back CSS

A New CSS Clear Floats Hack

WRITTEN BY ON 22 Feb 2011
20,852 VIEWS • SHARES
10 comments

This clearfix hack is good to clearing floats without having to adding additional html tag. floating is quite a common technique to make a tableless layout, and it's really annoying how many times you have to create a div with clear float class in it. This hack will solve that problem, instead of creating a new div, you attach this class to the parent class. It works flawlessly.

CSS

This new clearfloat hack remove IE for Mac support, thus reduce the size of the code.

/* new clearfix */
.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 */
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

10 comments
kamran vai 14 years ago
lol................

Try this:

<br class="clear" /> in markup and .clear { clear: both; }

or <br clear="all" /> only in markup.
Reply
eko 14 years ago
dude, this float hack is to avoid extra markup by adding this float hack class to its parent to clear the floats of its children. get it?
Reply
Prodyot 13 years ago
Great post.
Thanks.
Reply