html内に余計な記述をせず、floatを解除するcss

cssのtipsでは久々に目から鱗だったので、自分メモ。よくある左にナビゲーション左に本文を(または逆に)配置するレイアウト。左右に寄せたい要素float:left;またはfloat:right;を指定した場合、背景が消えたり、内容より短い高さになってしまう。flotで寄せた内容は親要素に含まれず、親要素にhightを指定していないとfloatした小要素より短くなってしまう仕様によるもの。

今までは、clear:both;を指定した<br />や空の<div></div>を最下部に入れて処理してたけど、空のdivやら意味のない要素をhtml内に記述するのはなんだか気が引ける。そう思って探してみたら、html内には余計な空要素等を追加することなく、cssだけで処理する方法が紹介されてました。

clearfixでfloatを解除 | d-spica

練習も兼ねて、実際にやってみます。

何も処理しない場合。

html

    

css

    

ブラウザの表示

左に寄せる要素

左に寄せる要素

左に寄せる要素

右側に寄せる要素

子要素を`float`指定した場合、上記の様に親要素の高さは`float`した子要素を含みません。

空要素でclaer

html

    

css(追加分)

    

左に寄せる要素

左に寄せる要素

左に寄せる要素

右側に寄せる要素

これで、親要素の高さは内包するこようその分まで延びます。ただし、無意味な<br / >があるのは何だか気持ちが悪い。
そこで、紹介されていたcssのみで指定する方法。

疑似要素afterを利用してClear

html

    

css(追加分)

    

左に寄せる要素

左に寄せる要素

左に寄せる要素

右側に寄せる要素

  1. cssの疑似要素afterを使って親要素の後に新たに要素を追加。
  2. 追加した要素をblock要素に。
  3. cler: both;を適用。
  4. 後に続く部分のレイアウトに影響しない様、heghtを0に。
  5. 追加した要素を非表示に。
  6. :afterが効かないIEでは、要素の幅か高さを指定すると、floatした子要素の高さも含めるバグを利用。
       
  7. ただし、IE6以前ではmin-heightを利用できないので、親要素の高さが、内包する子要素の高さに押し広げられるバグを 利用。
  8. さらに、MacIE4,5のための記述も追加。

htmlには、classを加えただけで非常にすっきり。取りあえず、cssにこれ書いとけば、clearしたいとこでclass="clearfix"と書くだけ。 これ、ほんと便利。

このエントリーをはてなブックマークに追加
はてなブックマーク - html内に余計な記述をせず、floatを解除するcss
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]