clearfixとは？使い方をサンプルコード付き解説！
CSSでfloatプロパティと共に使われるclearfixとは何か？その使い方をサンプルコード付きで解説します。
clearfixの前にまずfloatとは？
今回のメインテーマであるclearfix（クリアフィックス）の前にまずはfloatについて解説します。
floatはCSSのプロパティの1つで、要素をブロックの中の右か左のどちらかに寄せて配置し、続く文章や画像などの要素をその反対側に回り込めるようにする効果があるプロパティです。
言葉だけだと分かりづらいかと思いますので、floatプロパティを使った下記のサンプルコードを見てみましょう。
floatプロパティはその値にnoneやleft、rightなどの値を取ることができ、それぞれ
- none: 回り込ませない（初期値）
- right: 要素を右側に寄せて、続く要素を反対に回り込ませる
- left: 要素を左側に寄せて、続く要素を反対に回り込ませる
上記のサンプルコードでは
floatプロパティがnoneの場合は回り込みはせず、続く「サンプルテキスト」という文章は水色の要素の下に配置されます。一方で
floatプロパティがrightやleftが指定されると、続く「サンプルテキスト」という文章は水色の要素の左や右に回り込んで配置されます。このようにHTML要素を並べていくとブロックレベル要素だと基本は積み木のように縦に並んでいきますが、その並びを横並びに配置する目的で
floatプロパティは利用されされます。floatのやっかいな点
横並びを実現するfloatプロパティですが、やっかいな点があります。下記のサンプルコードを見てみましょう。
上記のサンプルコードではfloatプロパティを使って水色の要素を横並びにしています。
続く要素の「テキスト」は反対側（右側）に回り込み表示されていますが、やっかいな事にその後に続く縦に配置したい「2章」の見出し（h2要素）も右側に回り込んでしまっています。
floatの回り込みを解除する
floatプロパティの回り込みを解除するにはCSSのclearプロパティを利用します。下記のサンプルコードを見てみましょう。
clearプロパティは正にfloatの回り込みを解除するプロパティで、bothを指定することで右・左の回り込みの両パターンに対して回り込みを解除します。
上記のサンプルコードでは見出し（h2要素）の前で回り込みを解除したいので、h2のセレクタにclear:both;を設定しています。
このようにclear: both;を適宜回り込みを解除したい要素に対して設定すれば、思い通りfloatプロパティの横並びの設定と解除をコントロールできますが、もっと楽にfloatプロパティの横並びと、その回り込みの解除をしたいと思った時にclearfixが登場します。
それでは次章でclearfixとは何かという話に入ります。
clearfixとは？
clearfixとは何かと言うと、floatプロパティを使って横並びになっている要素をdiv要素などでボックスの中に内包し、その外側には回り込みの影響が出ないようにするテクニックです。
それでは実際にclearfixを使ったサンプルコードを見てみましょう。
解説
clearfix（クリアフィックス）を使うにはまず下記のCSSを用意します。
clearfixの書き方
.clearfix::after {
content: "";
display: block;
clear: both;
}これは.clearfixの::afterの疑似要素で、擬似的なボックスレベルの空の要素を作り、その要素に対してclear: both;で出回りこみを解除しています。
つまり.clearfixが適用されている要素はその最後の要素で回り込みが解除されるため、続く要素にはfloatプロパティの影響は考えなくてよくなります。
このようにclearfixはfloatプロパティの回り込みの影響範囲を限定する意味があり、1つclearifix用のスタイルを用意するだけでいいので、とても楽でよく利用されるテクニックになります。
まとめ
いかがでしたでしょうか。clearfixは下記のCSSを1つ用意するだけですぐに使えるテクニックです。
clearfixの書き方
.clearfix::after {
content: "";
display: block;
clear: both;
}floatプロパティでの横並びをする機会は今ではFlexboxが登場し頻度としては減っている傾向にあります。
ただ古くからあるコードや、Flexboxが未対応のブラウザを考慮する場合などfloatプロパティを使った横並びの方法はまだ現役で存在しています。
floatプロパティがとても癖のある初心者泣かせのプロパティですが、clearfixを使うことでfloatプロパティで躓く事は少なくなります。ぜひclearfixのやり方をマスターしましょう！
