クリアフィックス（Clearfix）

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

HTMLでの使用：

設定例

コピー<div class="clearfix"></div>

mixinのソースコード：

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

SCSSでmixinを使用：

.element {
	@include clearfix;
}

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

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

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

ブロックを変えて行頭揃え/行末揃えコピー<div class="bg-info clearfix p-3">
	<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 p-3">
	<button type="button" class="btn btn-secondary float-start">行頭揃えボタン</button>
	<button type="button" class="btn btn-secondary float-end">行末揃えボタン</button>
</div>