Skip to main content Skip to docs navigation

清除浮动(Clearfix)

通过添加 clearfix 工具类,可以快速轻松地清除容器中浮动的内容。

为父级元素 添加 .clearfix 类可以很容易地清除内部的浮动。还可以作为 mixin 使用。

在 HTML 中的使用方式如下:

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

引用该 mixin 的源码:

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

在 SCSS 中作为 mixin 使用:

.element {
  @include clearfix;
}

下面的示例展示了 .clearfix 的用法。如果没有 .clearfix ,父级 <div> 元素是无法覆盖住两个按钮的,从而导致布局被破坏。

html
<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">向左浮动(float)的示例按钮</button>
  <button type="button" class="btn btn-secondary float-end">向右浮动(float)的示例按钮</button>
</div>