[ご案内] 記事詳細ページです。ページデータを全て読み込みむまでに非常に時間がかかる場合があります。表示がおかしい場合は、ページを開いたまましばらく放置をしてみてください。忘れたころに完全表示する場合があります。それでもダメな場合は再読み込みをするか、時間をおいて再度アクセスをしてみてください。こちらからトップページへ戻れます。

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日 きみどらさんのコメント
コメントしましょう!
名前 ※ご自由に

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

ホームページ ※ご自由に

コメント ※必ず

  • ※いただいたコメントはすぐには表示されません。私kimidoraの承認後表示されます。
  • ※機械的スパムに対する対策機構を入れていますのでjavascriptを有効にしないとコメントできません。ご不便をおかけしますがご了承願います。
  • ※明らかな広告コメントなど、迷惑なものと判断した場合、掲載前にコメントを削除いたします。
  • ※トラックバックは受け付けておりません。
  • ※上記以外でのコメントに関するご質問などはお問い合わせからお気軽にご連絡ください。また私からの返事が必要な場合は必ず連絡先をご記入ください。
 
2012年05月
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
コメント
サイト情報
お問い合わせ
Powered by さくらのブログ