ma-san.org - 仙台でホームページ制作をするWebデザイナー

コーディングしているときに、背景や線が途中で消えたり、floatした親要素のマージンがおかしくなることがあると思います。
これは、floatした要素が親要素の高さに反映されていないため起きる現象です。つまり、親要素の枠に対して子要素は独自に高さを持ったりしてるため、親要素の枠をはみ出したりするんですね。
clearfixはこういった現象を解決するための方法です。

clearfixのやり方

CSS内にclearfix用のクラススタイルを用意します。

.clearFix::after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}

.clearFix {
_height: 1px;
min-height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

/* for MacIE5 \*//*/
.clearFix {
height: auto;
overflow: hidden;
}
/* end */

後は、このスタイルをfloatした要素に指定するだけで完了です。

clearfix以外の解決方法

clearfix以外にもoverflow: hiddenを使って解決する方法があります。

.overflow:after {
overflow: hidden;
}

* html .overflow {
zoom: 100%;
}

*+html .overflow {
zoom: 100%;
}

疑似要素の :after の変りに overflow: hidden を使用しています。
しかし、この方法では、NN7.1のバグで要素の高さが0になってしまうようです。

また、overflow: hiddenを指定してしまいますと、Dreamweaverのデザインビューアーにて要素の指定ができなくなってしまいます。
Dreamweaverを利用する方は注意してください。

余計なclassをソース上に記述したくない場合

上記の方法ですと、以下のようなソースになってしまいます。

<div id="content" class="clearfix">
コンテンツ
</div>

上記のようにclassを追加していくことは大規模なサイトなどでは不向きとなります。
clearfixが必要じゃなくなった場合、全頁から外すのは一括置換を行うにしても余計な作業が増えることになるからです。
僕の場合、以下のようにほぼ指定をしています。

.clearFix::after,
div#content::after,
div#header::after,
div#signBoard::after,
div#main::after,
div#utilities::after,
div#footer::after,
div#main ul.dir::after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}

.clearFix,
div#content,
div#header,
div#signBoard,
div#main,
div#utilities,
div#footer,
div#main ul.dir {
_height: 1px;
min-height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

/* for MacIE5 \*//*/
.clearFix,
div#content,
div#header,
div#signBoard,
div#main,
div#utilities,
div#footer,
div#main ul.dir {
height: auto;
overflow: hidden;
}
/* end */

えぇと･･･。とても長いですね...。
使うテンプレートが決まっていればこのように予め指定しておくのも一つの手です。
僕の場合はよく背景や線が使われる親要素に対して指定しています。

clearfixはCSSコーディングを行う場合、必要不可欠、とまでは言いませんがうまく利用できればコーディングも楽になります。
あれー！？なんか崩れたぞ！？という場合でもためしにclearfixを適用すれば解決することも！！