Clearfix. when an element only contains floated elements, it collapses on itself. To prevent this behavior, you have to “clearfix” it. We used to do it with an extra element, but not anymore. Note: The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes …

clearfix-2016.css

/* Margin collapsing is a feature, not a bug, and—as we can see here—it ensures a better distribution of boxes across the vertical axis.

So for this reason, I think it is better to favor display:block instead of display:table in "clearfix" rules.
As in:
*/

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


/* Now, if you do not care for “old” Opera, you could as well remove the space in the content value—as suggested by @kornelski */

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

clearfix.css

  .clearfix {
    *zoom: 1; /* IE 6/7 support */
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
    line-height: 0;
  }
  .clearfix:after {
    clear: both;
  }

clearfix.less

.clearfix {
  *zoom: 1; /* IE 6/7 support */
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

end-of-clearfix-2017.css

.container {
  display: flow-root;
}

/*

flow-root generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
Supported by Chrome Canary and Firefox Nightly
https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/

*/