CSS Clearfix / Group - User Experience

CSS Clearfix class for float layout fixes

October 27th, 2014 | CSS | Kumar Gaurav

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.