CSS★floatの解除にclearfix

kobato

4年前

floatの解除方法はいくつかありますが、
clearfixを使う方法が１番使い勝手がよいのでメモ。

floatを設定すると、要素が浮くことになり、
高さが消失してしまいます。
きちんとfloatを解除しておかないと、
高さがなくなった要素が重なって、
レイアウトが崩れてしまいます。

clearfixを使う方法

HTML：floatさせる要素を持つ親要素のクラスにclearfixを追加

<div class="clearfix"> <!-- ←ここです。 -->
　　　　<div class="box-b">float leftを設定</div>
  　　　 <div class="box-c">float righを設定</div>
</div>

CSS:clearfix:afterのセレクタを追記

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

内容を解説すると…
　.clearfix::after
　　clearfixというクラス名を付けた要素の直後(::after)に、
　content: “”;
　　contentプロパティで任意の文字などを挿入。
　display: block;
　　それをブロック要素にして、
　　表示はされないがclearfixを付けた要素の直後に要素を作った
　clear: both;
　　ここでfloatを解除

これで、回り込みが解除されます。

参考サイト：https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc