CSS Clearfix class for float layout fixes

October 27th, 2014 | CSS | Kumar Gaurav

CSS Clearfix / Group - User Experience

Just apply a class=”clearfix” to the parent element. This is an improved version of the original, and documented here.

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.


.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

I use “group” class a lot as this is more cleaner and does the job as perfect as “clearfix”.


.group:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
	}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

You can remove IE6 and IE7 line if you are not bothered about supporting IE6 or IE7 browsers.

Don't Be Selfish...Share on Facebook1Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on StumbleUpon0Share on Tumblr0Email this to someone

Having more than 5 years of experience in User Experience Design. My objective is to identify and solve design/architectural problems in the products we use or the product I work for. The methods are always same "User Centric Design" but execution is something which makes this field exciting and challenging. I aim to create engaging designs and experience that inform, inspire and entertain.

  • Desi Reuben-Sealey

    What does the HTML look like out of curiousity Kumar?