What clearfixes support what browsers?

Question

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

score 3 · Accepted Answer · answered Jan 24 '16 at 12:29

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

1 Answers1