さて【CSS 中級講座】シリーズ第２弾は、CSSコーディングには必携の知識「clearfix」について。

なんらかの要素を float した場合、しっかりそれを解除しないと続く要素にも影響しちゃって、レイアウトが崩れてしまいます。

そんな困った時に使われる「float状態を解除する方法」を通称して「clearfix（クリアフィックス）」と呼ぶのですが、実はいろいろな方法があります。

有名所としては「:after疑似要素 + contentプロパティ + IE用ハック」ってのがありますが、そんな手間をかけずとも、もっとシンプルにfloat解除する方法、あります！

そんな訳で、さっそくいってみましょー！

clearfixのビューティフルな実装法

実装前の状態

まず最初に、clearfixを使う前の「レイアウト崩れてもうた」状態のマークアップをば。

<div id="contents">
	<div id="main">
		<p>ここは<br />左側の<br />コンテンツです</p>
	</div>
	<div id="sub">
		<p>こっちは<br />右側の<br />コンテンツです</p>
	</div>
</div>
<p id="text">僕はどうなってしまうのでしょーか。</p>

んで、こっちが No clearfix のCSSです。

#contents {
	width:250px;
	margin:0 auto;
}
#main {
	background-color:#fcc;
	float:left;
}
#sub {
	background-color:#ccf;
	float:right;
}

さて、このコーディングでレイアウトがどう崩れるか、下記URLをご査収くださいな☆

clearfix実装法その１ overflow:hidden 実装前の状態

あぁっ、真ん中に入ってるぅぅ！すっごく入ってるぅぅぅ！！！

実装法その１ overflow:hidden

この状態を、たった１行で正しい表示に修復する方法があるんです！

それは「floatした要素の”親要素”に overflow:hidden を追加する」って方法！

具体的には下記のようにします。

#contents {
	width:250px;
	margin:0 auto;
	overflow:hidden; // コレ追加
}
#main {
	background-color:#fcc;
	float:left;
}
#sub {
	background-color:#ccf;
	float:right;
}

HTMLは一切変えてないので省略しますが、このたった１行を追加したサンプルが下記。

clearfix実装法その１ overflow:hidden 実装後

ね？ちゃんと想定通りのレイアウトになるっしょ？

実装法その２ clear:both

上記の overflow:hidden は使い勝手がとても良いのですが、マークアップによっては使えないケースも。

例えば下記のようなマークアップの場合、いくら親要素に overflow:hidden を追加しても float した要素の直後にあるモノには効かず、結果的に悲しい表示になります。

<div id="contents">
	<div id="main">
		<p>ここは<br />左側の<br />コンテンツです</p>
	</div>
	<div id="sub">
		<p>こっちは<br />右側の<br />コンテンツです</p>
	</div>
	<p id="text">僕はどうなってしまうのでしょーか。</p>
</div>

このマークアップで「clearfix実装法その１ overflow:hidden 実装後」と同じCSSのまんまだと、こんな感じ。

clearfix実装法その２ clear:both 実装前の状態

「こんな時、どういうコトしたらいいのか、分からないの。。。」

「”clear:both”でよかろーもん(´・ω・`)」

#contents {
	width:250px;
	margin:0 auto;
	overflow:hidden;
}
#main {
	background-color:#fcc;
	float:left;
}
#sub {
	background-color:#ccf;
	float:right;
}
#text {
	clear:both;
}

float した要素の次に来るモノに clear:both を追加すればOK！

HTMLは変えぬまま clear:both を追加したサンプルページは下記。

clearfix実装法その２ clear:both 実装後

こんな感じで「実装法その１」「実装法その２」を使い分ければ、:after擬似要素なんざ一切使わなくても、しっかりとしたCSSレイアウトが構築できます！