Web制作メモ -トップへ-

[CSS] クリアフィックスとは

HTML&CSS2013.12.24 21:42

要素をfloatした場合、その親要素はfloatした子要素の高さを取得できなくなります。その結果、子要素が親要素を突き抜けるという現象が発生します。

親要素に高さを取得させるためには、それ以降の要素でclear(clear:left, clear:right, またはclear:both)します。ただ、このためにclearを記述していると、ソースが分かり難くなり、管理できなくなってきます。

そこで、:after疑似要素を使うことで、ソースを綺麗に管理することが出来る方法が考えられました。これがクリアフィックスと呼ばれる方法で、floatさせる親要素のafter疑似要素にてclearする手法です。

クリアフィックスは対象ブラウザをどれに絞るか等でいろいろな書き方があります。

clearfixの例

親要素:after {
    content: "";
    clear: both;
    display: block;
}

クリアフィックスの他、overflow:hiddenを使う方法もあります。floatさせた要素の親要素にoverflow:hidden;で子要素の高さが確保されます。記述が少なく便利ですが、この場合、overflow:hidden;自体も有効になるので、それが困る場合はやはりクリアフィックスを使うことになります。