フロート解除

フロート解除ユーティリティを指定して、コンテナ内のフローティング要素をすばやく簡単に解除できます。

.clearfix を親要素に指定することで、float を簡単に解除できます。ミックスインとしても利用可能です。

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

// ミックスインそのもの
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// ミックスインとして使用
.element {
  @include clearfix;
}

次のサンプルは、clearfix の使い方を示したものです。 clearfix を指定しない場合、外側の 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>