clearfixというCSSのfloatを解除する手法

floatの解除は面倒

floatを使ったレイアウトは解除する方法が問題になります。解除自体はHTML上でfloatを使った要素の直後となる要素にclearを指定すればいいのですが、この方法はclearを指定した要素が変わった場合に新しい要素にclearを指定し直す必要があります。つまり、CSSの修正が発生します。

clearfixはHTMLのclass属性にあるクラスを指定する事でfloatを解除します。この方法であればクラスを追加または削除するだけでfloatを解除でき、CSSを更新する必要がないため簡単です。

clearfixのCSSは次のようになります。

.clearfix:after {
    clear: both;
    content: "";
    display: block;
}

次のように使います。

<div class="clearfix">
<div>floatを使った要素</div>
<div>floatを使った要素</div>
</div>

floatを使った要素の親要素のclass属性にclearfixを指定します。