Clearfix

clearfix ユーティリティを追加することで、コンテナ内のフロートされたコンテンツを簡単にクリアできます。

.clearfix を **親要素** に追加することで、float を簡単にクリアできます。ミキシンとしても使用できます。

HTML での使用

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

ミキシンのソースコード

scss/mixins/_clearfix.scss

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

SCSS でミキシンを使用

.element {
  @include clearfix;
}

次の例は、clearfix の使用方法を示しています。clearfix を使用しないと、ラップする div はボタンを囲まず、レイアウトが崩れます。

html

<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>