floatとclearfixで要素を横並びにする方法

cssの入門者にとって少しややこしいfloatプロパティの使い方。
今回はfloatの解除でよく使われている手法をまとめてみました。

floatプロパティとは

floatプロパティは、指定された要素を左寄せ、もしくは右寄せに配置します。
また、後に続く内容は、floatされた反対側に回り込みます。

ある要素の中で横並びのレイアウトを実現するためにfloatを使用すると、floatを抱えた要素の高さを親要素が認識できなくなってしまい、表示が崩れる場合があります。

下図はレイアウトが崩れてしまう現象が起こった場合の例です。

See the Pen side by Jumpei Konishi (@junpeko) on CodePen.

なぜ崩れるのか？

原因は、親の要素の高さが0になってしまっているためです。

この図でのfloatされている要素の親要素のクラスはborderです。
親要素であるborderクラスは、widthプロパティで幅が100%、borderプロパティにより幅8pxの緑色の枠線がに指定されており、子要素であるleftクラスとrightクラスを囲んで表示させたいのですが、borderクラスの高さが0となったことにより、bottomクラスが上にせり上がってしてしまっています。
そのため、borderクラスにも子要素（leftクラスとrightクラス）分の高さを持たせるために、clearfixという手法を用います。

See the Pen code by Jumpei Konishi (@junpeko) on CodePen.

float解除の方法

ポイントはborderクラスの疑似要素afterを使い、clearプロパティにより、borderの子要素の回り込みを解除していることです。
clearプロパティ

また。clearfixというクラスをborderクラスに着けるだけで表示崩れを防ぐことができるようにしているところも大事なところです。
これにより、別の場面でfloatを解除したい場合にclearfixというクラスをつけるだけで、floatを解除出来るようになります。
clearfixの機能を再利用できるようになるということです。

全体のソースは下記のようになります。

レイアウトに関して、flexboxといったレスポンシブデザインに対応しやすい新たな手法も出てきていますが、clearfixを使っているwebサイトも多いです。

是非使って覚えてみてください。