クリアするウラワザ

カテゴリ:CSSテクニック 2006年11月 7日 17:27

float、結構思惑通りに動かなくて苦労しますよね。
CSS 触り立てで陥るのが、float によって親ボックスが正常にしたまで伸びない、ということ。
(まぁ、動作的にはそれで正しいですが、直感的に言うとやや違和感ありますよね)
しかし、最初は「なにごと?!」と思ってしまいます。n

自分のイメージで簡単に説明します。
まず、輪ゴムを想像してください。(え? とか思わないでw)
さらに、タバコとかなんでもいいので箱(ボックス)を想像してください。
さて、その輪ゴムをその想像した箱にくくり付けてください。
輪ゴムは、箱の形になって伸びますよね?
これが、いわゆる通常時の親ボックスの形です。n

さて、今度はその箱から輪ゴムをとってください。
すると輪ゴムは元の形にもどって小さくなりますよね?
これが、float(浮いた)したボックス(タバコの箱)と親ボックス(輪ゴム)の関係です。
つまり、子ボックスが浮いてしまったために、親ボックスの中には何もない状態となってしまった、というわけです。n

だから、いきなりボーダーが変になったーと思っても、それが正常の動作(輪ゴムが元に戻るのと同じ)なのです。n

さて、ではどう対処したらいいか?n

float したボックスのあとに、float を clear するボックスを挿入しても解決されますが、ただそれだと HTML 的に汚くなってしまうので、CSS だけで解決しましょう。n

float を囲っている親ボックスに対して以下のプロパティを追加してください。n

▼EntryMore▼

さて、簡単に上記を説明すると、まず:after疑似クラスを認識するブラウザに色々と読み込ませます。content: "."; でボックスの最後にドットを表示させ、かつそれを block 要素に変換します。(display:block;)n

さらに、それを画面上に表示してしまうと都合が悪いので、色々保険をかけて非表示にします。
(height:0;、visibility: hidden;)n

最後に、その block 要素に対して clear を指定すれば完成です。
こうすることで、float して正常に見えなくなったボックスの最後に clear を追加し、ボックスを正常に表示させる、というものです。n

ただ、いくつか問題があるので、そのあとに続くハックでそれを回避しています。
まず、:after 疑似クラスがIEでは認識されないので、IE に対してのハックを行います。
まず、Win、Mac 双方の IE にのみ読み込ませるように「* html #box」と指定して他のモダンブラウザを排除します。
その上で、Win IE にのみ「height: 1%;」を、Mac IE に「display: inline-table;」をそれぞれ追加します。
これで完成です。n

さて、IE7 の登場で、上記クリアのワザも若干変更が必要みたいです。
といってもそれほどむずかしいことはなく、n

を追加するだけのようです。n

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/21