メインコンテンツへスキップ

クリアフィックス(Clearfix)

clearfixユーティリティを追加すると、コンテナ内のfloatをすばやく簡単にクリアにすることができる。

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

HTMLでの使用:

設定例
<div class="clearfix"></div>

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

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

●ブロックを変えて行頭揃え/行末揃え

●ブロックを変えて行頭揃え/行末揃え(同じ背景内)

●同じブロック内で行頭揃え/行末揃え

.clearfix がない場合(参考)

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>
【設定】
  • 同じブロック内で行頭揃え/行末揃え:クリアしたいところで .clearfix を入れる
  • 背景色のレイアウトが崩れる場合は、ブロックの親要素に .clearfix を入れる

Sass v5.1.0追加

デフォルトの設定
scss/mixins/_clearfix.scss の設定@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}
scss/helpers/_clearfix.scss の設定.clearfix {
  @include clearfix();
}