Clearfix清动浮动

通过添加.clearfix实用工具，快速轻松地清除容器内浮动的内容（使元素换行呈现）。

float类样式是通过添加 .clearfix 到父元素上来达达到清除目标，也可以作为Sass mixin使用。

<div class="clearfix">...</div>

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

// Usage as a mixin
.element {
  @include clearfix;
}

下面的实例展示了如何使用.cleafix，没有.cleafix清除浮动，外层包裹的DIV不会被覆盖从而导致版位错乱。

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>