clearfixを使ってfloatの回り込みを解除する方法

floatを使うと、要素が回り込んでしまって困った経験はないでしょうか?

今回はCSSのclearfixを使ってfloatの回り込みを解除する方法について紹介します。

clearfixはfloatを使う時に頻繁に出てくるので、是非理解しておきましょう!

clearfixを使ってfloatの回り込みを解除する方法

今回は以下の画像のように、赤と青のボックスの下に緑のボックスがくるようなレイアウトを作っていきたいと思います。

それでは早速見ていきましょう!

clearfixを使わない場合

◎HTML

◎CSS

赤・青・緑のボックスを用意し、それぞれのボックスに「width: 200px;」と「height: 200px;」を指定しました。

さらに、赤と青のボックスにだけ「float: left;」を指定。

ブラウザでは以下のように表示されます。

緑のボックスが赤のボックスの下にくるようにしたかったのですが、緑のボックスがなくなってしまいました。

正確には、赤と青のボックスがfloatして要素が浮いているので、赤のボックスの下に緑の要素が入り込んだ形になります。

clearfixを使う場合

◎HTML

◎CSS

赤と青のボックスの後に続く緑のボックスを回り込みしないようにするために、赤と青のボックスに対して「clearfix」のクラスを持った親要素のタグを追加しました。

そして「clearfix」のafterに対して要素が回り込みしないようにスタイルを適応させます。

結果は以下のように表示されました。

見本のレイアウトと同じように、赤のボックスの下に緑のボックスがくるようになりました。

「clearfix」を使うことで、floatの回り込みを解除することができますよ!

まとめ

以上が、CSSのclearfixを使ってfloatの回り込みを解除する方法でした。

是非真似してコーディングしてみてください!

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事