August 28, 2019

Clearfix Hack for Floated Elements

If all the child elements inside a parent container are floated, the height of the parent container collapses to zero.

The children, however, continue to occupy the area specified (width, height, etc.) or calculated based on the content inside them.

To clear the above mentioned effect of floats, add the following CSS to your stylesheet and apply the “clearfix” class to the parent container.

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /* for IE 6 and 7 only */
}

Learn more: http://nicolasgallagher.com/micro-clearfix-hack/

Categories: Web Development