本やネットでたくさん紹介されているので今さらではあるけれど、
一番シンプルな方法を覚え書き程度に書いておきたいと思います。
:afterの疑似クラスを用いて、5つのスタイルシートを記述して、
さらにIE対策でzoom: 1;を記述します。
.clearfix:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
.clearfix{
zoom: 1
}
上例はclass名として「clearfix」を使っていますが、
id名でも、タグ指定でも、大丈夫です。
▽例えばこんな感じ
p:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
p{
zoom: 1;
}
#hogehoge:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
#hogehoge{
zoom: 1;
}
深い階層付けをしたセレクタでも大丈夫。
▽例えばこんな感じ
#hoge .hogehoge table.hoge th div:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
#hoge .hogehoge table.hoge th div{
zoom: 1;
}
<br />にclearをさせる方法も使いますが、
このclearfixで重宝するのは、<br />が挟めない<ol><ul>（<dl>も）です。
よく使うのは<li>をfloatで横並びさせるときに、<ol>（<ul>）にclearfixしておいたりします。
.clearfixでCSSファイルに記述しておいて、
必要時HTMLに、<div class="clearfix">とかでclass名を付与するもよし、
特定の箇所にだけ、局所的にclearfixさせるもよし。
ハックなんて変則的なことは絶対いやだーーーって方には、おすすめはしませんが、
一度使うとあまりの便利さに、きっと逃れられなくなると思います。
