Search code examples
cssclearfix

What clearfixes support what browsers?

So there are a billion clearfixes out there. Does anyone have a collection of them with their browser support?

Solution

  • Here is a summary of the most used.

    Solution 1: The Old School Way

    .clear {
  clear: both;
}

    Method 2: The Overflow Way

    .container {
  overflow: hidden; /* can also be "auto" */
}

    Method 3: The “clearfix” Class

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

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}

    And if you don’t need to support anything below IE8

    .clearfix:after {
  content: "";
  display: table;
  clear: both;
}

    Method 4: The Future contain-floats Value

    .container {
  min-height: contain-floats;
}

    Src: http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/