WEBプログラム覚書::CSSハック：clearfix

2007年10月29日 21:39

CSSハック：clearfix

CSSハック

パーマリンク | http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/389

CSSによるレイアウトをおこなった場合、floatを利用することはスタンダードな手段だ。ところが親コンテナの中で子コンテナをfloatしてやると親コンテナの高さがおかしなことになる。

サンプル

id="clearFix"

id="cfLeft"

clearfixのテスト。左側に寄せるコンテンツ

id="cfRight"

clearfixのテスト。右側に寄せるコンテンツ

親コンテナに背景がある場合、背景が切れることになりその対策として下記のような.clearクラスをbrなどにくっつけてfloat解除をしていた。

サンプル


.clear {
    clear: both;
}

<div id="clearFix">
    <p>id="clearFix"</p>
    <div id="cfLeft">
    <p>float: left;</p>
    <p>clearfixのテスト。左側に寄せるコンテンツ</p>
    </div>
    
    <div id="cfRight">
    <p>float: right;</p>
    <p>clearfixのテスト。右側に寄せるコンテンツ</p>
    </div>
    
    <br class="clear" />
    
</div>

実行結果

id="clearFix"

float: left;

clearfixのテスト。左側に寄せるコンテンツ

float: right;

clearfixのテスト。右側に寄せるコンテンツ

floatがクリアされ、背景が表示されるので結果としては問題ないが、(x)HTMLに余分なソースを記述することになりちょっと気持ちが悪い。

そこでclearfixというCSSハックを利用する。

clearfixサンプルソース

【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]


clearFix {
    zoom:1;/*for IE 5.5-7*/
}

clearFix:after {/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}