carlos-sanchez
11/14/2013 - 3:48 AM

Clearfix. when an element only contains floated elements, it collapses on itself. To prevent this behavior, you have to “clearfix” it. We us

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 space to appear at the top and bottom of elements that are clearfixed.

Note: The use of display: table rather than display: block is only necessary if using the :before pseudo-element to contain the top-margins of child elements.

http://nicolasgallagher.com/micro-clearfix-hack/

http://fuseinteractive.ca/blog/understanding-humble-clearfix#.VLJn7KZxJN0

.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/

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