Last Updated: February 25, 2016

Best Clearfix Ever

I can't remember exactly where I found this, but it is awesome.

.clearfix {
  zoom: 1;
  clear: both;
}

.clearfix:before, .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

#css

Written by Shane McDonald

Say Thanks

Respond

Related protips

Fully custom select box, simple css only

570.6K

Change the Bootstrap NavBar Breakpoint

499.9K

Creating full width (100% ) container inside fixed width container.

464.4K

2 Responses

Add your response

neutraltone

This is very similar to the clearfix in the HTML5 Boilerplate, I think this must be from one of the older version. The latest one currently looks like this

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

It can be found here with a better explanation: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

over 1 year ago ·

shanemcd

@neutraltone Awesome, thanks for sharing!

over 1 year ago ·