CSSハック：clearfix
パーマリンク | 2007年10月29日 21:39
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サンプルソース
clearFix {
zoom:1;/*for IE 5.5-7*/
}
clearFix:after {/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
clearfix実行結果
id="clearFix"
float: left;
clearfixのテスト。左側に寄せるコンテンツ
float: right;
clearfixのテスト。右側に寄せるコンテンツ
上記以外にも書き方は多数ある模様。
cleafix参考サイト
トラックバック
- http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/179
最新更新ページ
- 2008/09/08sprintf()メモ
- 2008/09/05一定時間でsession終了メモ
- 2008/08/203ds MAX プラグイン Greeble
- 2008/08/13RSS 3Dデータ
- 2008/07/09PHP ファイルのオープンと読み込み
