トップ   >   記事表示

CSS:スマートなfloat解除テクニック「clearfix(クリアーフィックス)」の紹介と使用例

URL: http://tech.kimihiko.jp/article/25482619.html

このエントリーをはてなブックマークに追加
CSS:スマートなfloat解除テクニック「clearfix(クリアーフィックス)」の紹介と使用例

floatをした指定した子の親要素のさいごでクリアされます!!!
clearfixとは、余分タグを追加することなく、親要素のセレクタに特定のプロパティを追加することで
クリア状態にしてくれる、バグを利用したテクニックです。

※ CSSファイルの下に記述するのが通例

ex. #ex_menuで囲まれたfloatたちの自動clear。

※ 以下すべてがワンセットです。
/*-------------------------------------------------------------------- clearfix[float解除]
--------------------------------------------------------------------*/
#ex_menu dl:after {
content:".";
display:block;
height:0.1px;
clear:both;
visibility:hidden;
overflow:hidden;
}

#ex_menu dl {
zoom:1;
}

※ 通常、適用したいIDやclassをふやすには
..ex_account_cont01:after,
..ex_account_cont02:after,
#ex_menu dl:after {content:".";
。。。。などという具合に併記します。

※ 解説
#ex_menu dl { zoom:1; }
の部分は、IE6.0以前に適用させる記述です。
こちらには、:afterはつきません。
関連する記事(広告含む)
なんでID使うんですか?意味がわからないです

IE7もafterつかない気がします
2011年11月05日  
勉強不足でした。出直してきます。
2011年11月16日  きみどら
コメントを書き込む
名前 ※ご自由に

メールアドレス ※ご自由に

ホームページ ※ご自由に

コメント ※必ず

  • コメントがうまくできない場合などはこちらをご確認ください。