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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

クリアフィックス(Clearfix)

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

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

設定例
<div class="clearfix"></div>
Sassでの設定// 自身をmixin
@mixin clearfix() {
	&::after {
		display: block;
		content: "";
		clear: both;
	}
}

// mixinとして使用使用
.element {
	@include clearfix;
}

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

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

●ブロックを変えて左寄せ/右寄せ

●同じブロック内で左寄せ/右寄せ

.clearfix がない場合(参考)

設定例
ブロックを変えて左寄せ/右寄せ<div class="bg-info clearfix p-3">
	<button type="button" class="btn btn-secondary float-left">左寄せボタン</button>
	<div class="clearfix"></div>
	<button type="button" class="btn btn-secondary float-right">右寄せボタン</button>
</div>
同じブロック内で左寄せ/右寄せ<div class="bg-info clearfix p-3">
	<button type="button" class="btn btn-secondary float-left">左寄せボタン</button>
	<button type="button" class="btn btn-secondary float-right">右寄せボタン</button>
</div>

【設定】

  • 同じブロック内で左寄せ/右寄せ:クリアしたいところで div.clearfix を入れる
  • 背景色のレイアウトが崩れる場合は、ブロックの親要素に .clearfix を入れる

【Bootstrap3.xとの変更箇所】

  • 古いバージョンのブラウザでは非対応