ClearFix vs. overflow: hidden, which is better?

Which is better to use?

ClearFix
https://jsfiddle.net/Ljbnyc93/74/

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

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

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

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

overflow: hidden
https://jsfiddle.net/Ljbnyc93/73/

.container {
  overflow: hidden;
}

.wraph {
  overflow: hidden;
}

.wrapc {
  overflow: hidden;
}

.wrape {
  overflow: hidden;
}

Overflow is normally fine, though sometimes you don’t want to hide the overflow so the other hack is better in those cases. However there’s no point adding it manually every time you want some floats to be cleared. Just have a single class called .clearfix that you can use whenever you need it. And then you can use whichever you want, and switch if there are issues.

Note these things are hacks to deal with CSS having no real layout rules except tables. It now does (via flex and grid).

1 Like