Clear a floating element without additional markup

Found at: Position is everything

Normally you would add an element like this:

<div style="clear:both">&nbsp;</div>

after your floating elements to clear them. With this method you don’t need to do this anymore.

Just add this to your stylesheet:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

and also add the “clearfix” class to the element that wraps your floating element. That’s it.

Leave a Reply