clearfixとは?使い方をサンプルコード付き解説!

CSSでfloatプロパティと共に使われるclearfixとは何か?その使い方をサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1clearfixの前にまずfloatとは?
  2. 1.1floatのやっかいな点
  3. 1.2floatの回り込みを解除する
  4. 2clearfixとは?
  5. 2.1解説
  6. 3まとめ

clearfixの前にまずfloatとは?

今回のメインテーマであるclearfix(クリアフィックス)の前にまずはfloatについて解説します。

floatはCSSのプロパティの1つで、要素をブロックの中の右か左のどちらかに寄せて配置し、続く文章や画像などの要素をその反対側に回り込めるようにする効果があるプロパティです。

言葉だけだと分かりづらいかと思いますので、floatプロパティを使った下記のサンプルコードを見てみましょう。

floatプロパティはその値にnoneleftrightなどの値を取ることができ、それぞれ

  • none: 回り込ませない(初期値)
  • right: 要素を右側に寄せて、続く要素を反対に回り込ませる
  • left: 要素を左側に寄せて、続く要素を反対に回り込ませる
と配置されます。

上記のサンプルコードではfloatプロパティがnoneの場合は回り込みはせず、続く「サンプルテキスト」という文章は水色の要素の下に配置されます。

一方でfloatプロパティがrightleftが指定されると、続く「サンプルテキスト」という文章は水色の要素の左や右に回り込んで配置されます。

このようにHTML要素を並べていくとブロックレベル要素だと基本は積み木のように縦に並んでいきますが、その並びを横並びに配置する目的でfloatプロパティは利用されされます。

あわせて読みたい
float
CSSのfloatプロパティは指定した要素をブロック内の左右のどちらに寄せるかを制御するプロパティです。floatプロパティの構文や使い方をサンプルコード付きで解説します。

floatのやっかいな点

横並びを実現するfloatプロパティですが、やっかいな点があります。下記のサンプルコードを見てみましょう。

上記のサンプルコードではfloatプロパティを使って水色の要素を横並びにしています。

続く要素の「テキスト」は反対側(右側)に回り込み表示されていますが、やっかいな事にその後に続く縦に配置したい「2章」の見出し(h2要素)も右側に回り込んでしまっています。

floatの回り込みを解除する

floatプロパティの回り込みを解除するにはCSSのclearプロパティを利用します。下記のサンプルコードを見てみましょう。

clearプロパティは正にfloatの回り込みを解除するプロパティで、bothを指定することで右・左の回り込みの両パターンに対して回り込みを解除します。

あわせて読みたい
clear
CSSのclearプロパティはfloatプロパティで右寄せや左寄せした要素に対する回り込みを解除するプロパティです。clearプロパティの構文や使い方をサンプルコード付きで解説します。

上記のサンプルコードでは見出し(h2要素)の前で回り込みを解除したいので、h2のセレクタにclear:both;を設定しています。

このようにclear: both;を適宜回り込みを解除したい要素に対して設定すれば、思い通りfloatプロパティの横並びの設定と解除をコントロールできますが、もっと楽にfloatプロパティの横並びと、その回り込みの解除をしたいと思った時にclearfixが登場します。

それでは次章でclearfixとは何かという話に入ります。

Photo bykreatikar

clearfixとは?

clearfixとは何かと言うと、floatプロパティを使って横並びになっている要素をdiv要素などでボックスの中に内包し、その外側には回り込みの影響が出ないようにするテクニックです。

それでは実際にclearfixを使ったサンプルコードを見てみましょう。

解説

clearfix(クリアフィックス)を使うにはまず下記のCSSを用意します。

clearfixの書き方

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

これは.clearfix::afterの疑似要素で、擬似的なボックスレベルの空の要素を作り、その要素に対してclear: both;で出回りこみを解除しています。

あわせて読みたい
::after
CSSの::after(:after)は疑似要素の1つで、指定したセレクタの要素の最後の子要素として擬似的な要素を生成します。::afterの構文や使い方についてサンプルコード付きで解説します。
あわせて読みたい
content
CSSのcontentプロパティは文字や画像、カウンターの値などを要素の前後に追加できるプロパティです。contentプロパティの構文や使い方をサンプルコード付きで解説します。

つまり.clearfixが適用されている要素はその最後の要素で回り込みが解除されるため、続く要素にはfloatプロパティの影響は考えなくてよくなります。

clearfixのイメージ

このようにclearfixはfloatプロパティの回り込みの影響範囲を限定する意味があり、1つclearifix用のスタイルを用意するだけでいいので、とても楽でよく利用されるテクニックになります。

まとめ

いかがでしたでしょうか。clearfixは下記のCSSを1つ用意するだけですぐに使えるテクニックです。

clearfixの書き方

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

floatプロパティでの横並びをする機会は今ではFlexboxが登場し頻度としては減っている傾向にあります。

ただ古くからあるコードや、Flexboxが未対応のブラウザを考慮する場合などfloatプロパティを使った横並びの方法はまだ現役で存在しています。

floatプロパティがとても癖のある初心者泣かせのプロパティですが、clearfixを使うことでfloatプロパティで躓く事は少なくなります。ぜひclearfixのやり方をマスターしましょう!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次