Tuesday, 19 March 2013

# A clearfix without additional markup

For a long time we've been forced to clear floats in a manner something like this:

<div class="float">a</div>
<div class="float">b</div>
<div class="float">c</div>
<div class="clear"></div>

.float {
float:left;
}
.clear {
clear:both;
}


Fortunately with the usage of IE7 declining we can finally embrace the use of pseudo-elements. There have been a few different clear fixes using pseudo elements popping up around the web over the last few years, this one is my favourite. It is applied to a wrapper around the floated elements by creating a pseudo-element after the wrapper and clearing there.

.container:after {
display: block;
content: "";
clear: both;
}


Here is an example of it in action.

<div class="container">
<div class="float">a</div>
<div class="float">b</div>
<div class="float">c</div>
</div>

.float {
float:left;
}
.container:after {
display: block;
content: "";
clear: both;
}


This method works with IE9, IE10 and the latest versions of Chrome, Opera, Firefox and Safari.