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.

More posts tagged CSS