.clearfix
を親要素に追加することでfloatを簡単にクリアすることが可能。mixinとしても使用可能。
HTMLでの使用:
設定例
<div class="clearfix"></div>
mixinのソースコード:
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
SCSSでmixinを使用:
.element {
@include clearfix;
}
以下の事例でクリアフィックスの使用方法を表示。クリアフィックスがなければ、包括の div
要素はボタンの周囲に広がらず、レイアウトが壊れてしまう。
見本 わかりやすいように背景色と空白を付けています
●ブロックを変えて行頭揃え/行末揃え
●同じブロック内で行頭揃え/行末揃え
※.clearfix
がない場合(参考)
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>
【設定】
- 同じブロック内で行頭揃え/行末揃え:クリアしたいところで
div.clearfix
を入れる - 背景色のレイアウトが崩れる場合は、ブロックの親要素に
.clearfix
を入れる
ページ移動
前のページ
ページがありません次のページ
色付きリンク
ページがありません次のページ
色付きリンク