今回はCSSで使用される「clear」や「clearfix」についてご紹介します。

簡単なものですし、レイアウトを整えるためによく使用される要素です。
※特に「floatによる回り込みの解除」のためによく使われます。

いくつかのサンプルを見ながら使い方を見ていきましょう。

clearを使わない場合

まずはclearをどんな時に使うべきかを紹介するために、clearを使っていないケースを紹介します。

以下のHTML・CSSと実行結果を見てみて下さい。

■HTML

■CSS

※footerでclear:both;を使用していますが、これはfooterの回り込みを制御するためのものです。今回説明するclearとは別物と思って良いです。

■画面

２カラムのレイアウトを作成したものなのですが、よく見てみるとmain部分（背景色）が表示されていません。mainにも「background: #00EE00;」という背景色を付けているのですが、カラム１、カラム２の両端は空白になってしまっていますね。

これはfloatが解除されていない事により、main部分の高さが0になってしまう事象です。WEBデザインなどでは基本的なミスになります。

clearでfloatを解除する

clearを使えば簡単にfloatを解除する事ができます。

カラム２の直後にもう一つdivタグを使用して、「clear: both;」を指定する事で、floatが解除されます。

■HTML（修正・追加部分のみ）

■CSS（追加部分のみ）

■画面

clearを指定する事によって、floatの回り込みが解除され、main部分の背景色が表示されました。

ただ、この方法だと少し恰好悪い書き方になります。※動作としては問題無いので、この使い方でもＯＫはＯＫです。

clearfixとafter疑似要素により、良く使われる方法

divタグを使ってclearを使用するよりも、よりスマートな方法をご紹介します。after疑似要素を使った方法で現在の主流になっています。

■HTML（修正・追加部分のみ）

■CSS（追加部分のみ）

■HTMLとCSSの解説

HTML部分はなんとなく分かると思いますので、clearfix::afterで指定されているプロパティや値について少し解説します。

・content：contentはbefore疑似要素、after疑似要素と組み合わせて使用されます。特に「content: ”;」として空文字のみを出力する事が多いです。

・display：displayはプロパティ(※1)の一つです。displayに「block」を指定する事で、要素が横幅一杯までの大きさで表示されます。H1タグ、Pタグなどもdisplay要素にデフォルトでblockが設定されているのでイメージしやすいかもしれません。
※1 ⇒CSSで指定するcolorなどの事をプロパティと言います。displayは要素の表示・幅・高さなどを指定する事ができます。

・clear：clearは回り込みを解除する際に使用されます。以下の様な値を指定する事ができます。
「left⇒左寄せ要素を解除」
「right⇒右寄せ要素を解除」
「both⇒左寄せ右寄せ両方の要素を解除」

■画面

clearfixをafter疑似要素として定義して、containerの後に入れた事で非常にスッキリとした形でmainの背景色が設定されました。

after擬似要素は「:after」として定義をする事で、要素の直後に疑似要素が挿入される事になります。逆にbefore疑似要素ものもありますが、こちらは指定した要素の直前に疑似要素を挿入する命令になります。

疑似要素は、HTMLを綺麗にする目的でよく使われます。名前は難しそうですが、特別難しいものではありませんので、現時点で分からなければ一旦「ふーん」と思っていただいてＯＫです。

まとめ

今回はレイアウトを整えながら、clear、clearfix、after疑似要素などについてご紹介しました。WEBデザインなどを行う際にはfloatと組み合わせてよく使われます。

他の方が作成せいたWEBサービスのHTML、CSSを見てみるとよく出てくるCSS定義だったりしますので、後でよく分からない！といった事にならない様にしっかりと押さえておきましょうね。