Clearfix清动浮动

通过添加.clearfix实用程序,快速轻松地清除容器内浮动的内容(使元素换行呈现)。

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

  1. <div class="clearfix">...</div>
  1. // Mixin itself
  2. @mixin clearfix() {
  3. &::after {
  4. display: block;
  5. content: "";
  6. clear: both;
  7. }
  8. }
  9. // Usage as a mixin
  10. .element {
  11. @include clearfix;
  12. }

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

清动浮动(clearfix) - 图1

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