View on GitHub

Clearfix (清除浮動)

透過增加 clearfix 通用類別，可以快速輕鬆地清除容器中的浮動內容。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

透過將 .clearfix 添加到父元素之中 可以輕鬆的清除 float。也可以當作 mixin 來使用

在 HTML 使用:

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

mixin 原始碼：

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

在 mixin 中搭配 SCSS:

.element {
  @include clearfix;
}

以下範例顯示如何使用 clearfix。如果沒有使用 clearfix，則包裝按鈕的 div 將不會展開來，這會導致佈局跑版。

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