便利なclearfixとは？

(x)html+cssでコーディングをしていると、思うようにいかない場面に多々遭遇します。個人的にはliタグにfloatを与えたときが多いですね。背景色が白い場合には特に気にならないんですが、背景色をつけてみると、色が最後まで届いていない。というかブロック自体思うように認識されていないことが問題なんですが…。

そんなときによく使うのが、このclearfixと呼ばれている、技！

ほんとによく使うので、Dreamweaverでスニペット登録しました。

div{
    zoom:1;
}
div:after{
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}

ちなみにdivって書いてますが、floatをかけたブロックの親要素のことです。それを理解するのに随分時間がかかりました。

<div class="section">
<ul>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>

.section li {
    float: left;
}
.section ul {
    zoom:1;
}
.section ul:after {
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}