display:table in .clearfix rule may create unwanted gaps between blocks

[thierryk]

The clearfix rule has changed to reflect the latest new clearfix so far but as this more recent article explains, display:table may create unwanted gaps between blocks.

So my suggestion is to replace the existing _clearfix.scss:

@mixin clearfix() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

with:

@mixin clearfix() {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

[cvrebert]

CC: @mdo for review

[thierryk]

It may be worth editing the documention too as it says:

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

since the new rule does not have much to do with the "micro clearfix" anymore.