クリアフィックス（Clearfix）

.clearfix を親要素に追加することでfloatを簡単にクリアできる。ミックスインとしても使用できる。

実例（Examples）

HTMLでの使用：

設定例

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

SCSSでミックスインを使用：

custom.scss.element {
  @include clearfix();
}

以下の事例でクリアフィックスの使用方法を表示。クリアフィックスがなければ、包括の div 要素はボタンの周囲に広がらず、レイアウトが壊れてしまう。

見本 わかりやすいように背景色と空白を付けています

Bootstrap5.xの設定例 緑背景が変更箇所

ブロックを変えて行頭揃え/行末揃え<div class="bg-info">
  <button type="button" class="btn btn-secondary float-start">行頭揃えボタン</button>
  <div class="clearfix"></div>
  <button type="button" class="btn btn-secondary float-end">行末揃えボタン</button>
</div>

ブロックを変えて行頭揃え/行末揃え（同じ背景内）<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">行頭揃えボタン</button>
  <div class="clearfix"></div>
  <button type="button" class="btn btn-secondary float-end">行末揃えボタン</button>
</div>

同じブロック内で行頭揃え/行末揃え<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">行頭揃えボタン</button>
  <button type="button" class="btn btn-secondary float-end">行末揃えボタン</button>
</div>

CSS v5.1.0追加、v5.3.0Sassから名称変更

Sassミックスイン（Sass mixins）

デフォルトの設定

scss/mixins/_clearfix.scss の設定@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}