トラブル克服&実験レポート / WebDevelopment  [WEB制作の正しい作法]  

【ClearFix】 の考え方

2,3年前より、浸透し始めた手法に「ClearFix」という考え方があります。
Footerなどのように意味のある要素にclear Bothを指定するのは良いのですが、clear Both を設定するためにだけ、特に必要も無いのにBR要素などを追加するのは、HTMLの文書構造として正しくないし、第一スマートではありません。
なんと言っても余分な余白ができますからね。

この「ClearFix」という手法を使うと、HTMLには要素を追加せずにCSSだけでclear Bothを指定した要素を追加することができます。
まあ、両者ともclear Bothを指定した要素を追加することには変わりは無いんですが、HTML文にレイアウトのためだけの記述を追加せずに済み、なんと言っても余白がでません。
さらに、基本CSSに記述しておくとクラス名を追加するだけでOKっていうのも簡単で良いです。

方法は・・・・
CSSプロパティの「content」と擬似要素:afterだけで要素を追加し、その要素へClearbothを設定します。
※「content」プロパティは「:after」などの擬似要素とセットで使い、指定した要素へ文字列や画像などを追加します。
※「:after」は「content」プロパティと一緒に使用し、指定した要素が内包する一番最後の要素を参照します。

先のClear Bothを指定せずに高さが潰れた見本を参考に記述してみます。



上記の見本にCSSだけを追加記述します。
下記の赤字部分が追加したコードです。

■ClearFixソース

.fbaseV{
	margin:10px auto;
	padding:10px;
	width:295px;
	height:auto;
	background: #aaa256;
}


.fbaseV:after {
	content:" ";
	display:block;
	clear:both;
	height:0;
}


.boxStdV {
	float:left;
	margin:0 5px 0 0;
	padding:5px;
	width:60px;
	background: #fff9e2;
}

.boxEndV {
	float:left;
	margin:0;
	padding:5px;
	width:60px;
	background: #faa9e2;
}

解説：
1. 擬似要素:afterを使用し、「fbaseV」クラス(外側BOX)が内包する要素の一番最後へ、「content」プロパティでスペース「" "」を追加します。
ここは何を追加してもいいんですが表示されると具合が悪いのでスペースを追加します。
2. 次に追加した要素をブロック要素にしclearBothを指定することでつっかえ棒が完成します。
ここで高さを0にしないと余分な隙間ができますので注意。

実際にHTNL例題をダウンロードしてブラウザで確認してみて下さい。

ところでこの手法はIE6～7では効きません。
でも、旨くしたもので、IE6～7では外側BOXのheightをautoに指定しても潰れることはありません。
なので必要ありません。＾＾
IE8では、Firefox並みにCSS2.1の仕様に準拠するようになりました。
なので、Firefoxと同じようにheightをautoにすると潰れますが、この手法で対処することができます。

【おまけ：】
どのHTMLにも共通で使用するbase.cssなどを作り、そこに「clearFix」などの名前でクラスを作成し、下記のようなソースを追加しておきます。

.clearFix:after {
	content:" ";
	display:block;
	width:100%;
	clear:both;
	height:0;
}

そしてclearFixを適用したい要素へ「clearFix」クラスを適用します。
すでに別のクラスを適用していてもスペースを途中に挟めばいくらでもクラスを追加できます。

<div class="fbaseV">

↓↓↓↓↓↓↓↓↓↓↓

<div class="fbaseV clearFix">