zrg95g
Last Updated: February 25, 2016
·
1.363K
· shanemcd

Best Clearfix Ever

css

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;
}

2 Responses
Add your response

6278

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 ·
6355

@neutraltone Awesome, thanks for sharing!

over 1 year ago ·