float、結構思惑通りに動かなくて苦労しますよね。
CSS触り立てで陥るのが、floatによって親ボックスが正常にしたまで伸びない、ということ。
（まぁ、動作的にはそれで正しいですが、直感的に言うとやや違和感ありますよね）
しかし、最初は「なにごと？！」と思ってしまいます。
自分のイメージで簡単に説明します。
まず、輪ゴムを想像してください。（え？ とか思わないでｗ）
さらに、タバコとかなんでもいいので箱（ボックス）を想像してください。
さて、その輪ゴムをその想像した箱にくくり付けてください。
輪ゴムは、箱の形になって伸びますよね？
これが、いわゆる通常時の親ボックスの形です。
さて、今度はその箱から輪ゴムをとってください。
すると輪ゴムは元の形にもどって小さくなりますよね？
これが、float（浮いた）したボックス（タバコの箱）と親ボックス（輪ゴム）の関係です。
つまり、子ボックスが浮いてしまったために、親ボックスの中には何もない状態となってしまった、というわけです。
だから、いきなりボーダーが変になったーと思っても、それが正常の動作（輪ゴムが元に戻るのと同じ）なのです。
さて、ではどう対処したらいいか？
floatしたボックスのあとに、floatをclearするボックスを挿入しても解決されますが、ただそれだとHTML的に汚くなってしまうので、CSSだけで解決しましょう。
floatを囲っている親ボックスに対して以下のプロパティを追加してください。
- #box:after {
- content: ".";
- clear: both;
- display: block;
- height: 0;
- visibility: hidden;
- }
- * html #box {
- display: inline-table;
- }
さて、簡単に上記を説明すると、まず:after疑似クラスを認識するブラウザに色々と読み込ませます。content: "."; でボックスの最後にドットを表示させ、かつそれをblock要素に変換します。（display:block;）
さらに、それを画面上に表示してしまうと都合が悪いので、色々保険をかけて非表示にします。
（height:0;、visibility: hidden;）
最後に、そのblock要素に対してclearを指定すれば完成です。
こうすることで、floatして正常に見えなくなったボックスの最後にclearを追加し、ボックスを正常に表示させる、というものです。
ただ、いくつか問題があるので、そのあとに続くハックでそれを回避しています。
まず、:after疑似クラスがIEでは認識されないので、IEに対してのハックを行います。
まず、Win、Mac双方のIEにのみ読み込ませるように「* html #box」と指定して他のモダンブラウザを排除します。
その上で、WinIEにのみ「height: 1%;」を、MacIEに「display: inline-table;」をそれぞれ追加します。
これで完成です。
続きを読む "クリアするウラワザ"
