（つくば：カエル）

2007年10月09日

at 19:58
posted by @
comments(0)
XHTML+CSS

clearfix

XHTML+CSSのコーディングで割りとかかせないのがfloat。
カラムレイアウトにはかかせないものです。

回り込みを終えたい時、floatを解除するのにclearfixを使い始めました。
すっっっごく便利です。


今までは<div>や<br />や<hr />にclearをクラス指定してました。
<div>は「Another HTML - lint gateway」で減点にはなりませんが、エラーが出たり、
<hr />はIEで余計なマージンがあったりと、マージンに気を使う場合は割と不便なんですよね。
あとは、必ずクラス指定のためにHTMLに手を入れなければならない点もあります。

その点clearfixはCSSだけでこと足りる点も◎
もっと早く使っていれば良かったです汗
例えば、liにfloatを指定した場合。
clearしたい親要素（この場合はul）に以下を指定する。

ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
ul {
    display: inline-block;
}
/*Hides from IE5-mac \*/
* html ul {
    height: 1%;
}
ul {
    display: block;
}
*+html body ul {
    zoom: 1;
}
/*End hide from IE5-mac */


clearfixを多様する場合は、ulの部分を.clearfixなどのクラスにしておけば、HTMLにそのクラスを指定するだけで簡単にclearできる。
オススメです。

タグ ：CSSホームページブラウザXHTMLclear

同じカテゴリー（XHTML+CSS）の記事画像
IEでiframeのボーダーが消えない
Firefoxで携帯サイトをシミュレートするアドオン
IEで画像の下に意図しないマージン（余白）が出る
Windows版Safariでテキストエリアのリサイズが可能
IE6でネガティブマージンを指定した画像
styleswitcher.jsでスタイルシート切り替え
同じカテゴリー（XHTML+CSS）の記事
 IEでiframeのボーダーが消えない (2009-07-17 21:00)
 スタイルシートでボックスを中央に配置 (2009-07-07 21:00)
 スタイルシートでボックスを画面中央に配置 (2009-05-19 21:00)
 Firefoxで携帯サイトをシミュレートするアドオン (2008-10-31 15:44)
 IEで画像の下に意図しないマージン（余白）が出る (2008-10-09 11:30)
 JavaScriptがいらないGoogleマップ API (2008-06-02 12:15)
ページ先頭に戻る
（つくば：カエル）

comments form

名前：
メール：
URL：
コメント：
ページ先頭に戻る