【初心者の為のコーディング】　clearfixクラスについて

i.M.D. Staff

2014.12.10

こんばんは
前々回にお伝えした.clearfixクラスについてお話います。
clearfixを最初に考案したのは、オーストラリア人のWebデベロッパーTony Aslettが、
2004年5月08日に擬似要素を使用した手法を公表しました。
「.clearfixクラス」とはfloatを使用した際の回り込み解除するために使うクラスです。

clearfixは下記のように指定しておき、使いたい親要素へクラスで「clearfix」を指定します。

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

回り込み解除するのであればclearプロパティを使えばいいやと思う方もいらっしゃると思いますが、
clearプロパティはfloatを使った際のボックスの後ろに指定しなければなりません。
そのため状況によっては「不要なHTML要素が増える」、「HTMLの文法に問題が生じる」等の問題があります。その問題を解決する方法が、「clearfix」です。
下記の例を見て下さい。

下記は親要素(グレーの部分)に「.clearfix」を指定していません。
その為、親要素の背景が出ていません。また、下の赤い部分が回り込んでしまいます。

何も指定していません

float:left;

回り込みます

下記は親要素(グレーの部分)に「.clearfix」を指定しています

.clearfixを指定

float:left;

回り込みません

上記のように「clearfix」を使うとfloatを使った際の親要素の高さと、
回り込みの解除もおこなってくれる便利なクラスです。
前々回の記事で「float」を使う際は「overflow:hidden」を親要素に入れると親要素の高さが出るとお伝えしましたが、わざわざ「clearfix」を使わなくても「overflow:hidden」でいいんじゃないかと思いますよね。
「overflow:hidden」で充分事足りることが多いのですが、この「overflow:hidden;」は本来枠からはみ出た子要素を非表示にするためのCSSなので、枠からはみ出た子要素を非表示にするのが邪魔になることがあります。

その際は「clearfix」が使えます。