トラブル克服と実験レポート！ / Discovery

Floatによる段組を使用した場合、clear Bothを設定しないとCSSの仕様ではBOXの高さが確保されません。
以下の例題をご覧ください。 ■HTML例：例題
この例題は高さ210ピクセルを指定したBOXの中にFloatを指定した4つのブロック要素を配置したものです。
このままだと中身の要素の高さが変化しても外側は追従することができません。
中身に応じて自在に外側BOXの高さが変化するように高さ210ピクセルを「auto」に変更します。 ■HTML例：clear Bothが無い場合

すると、このようにFirefoxでは高さがつぶれてしまいます。
CSSの正しい仕様では、Float を設定した要素はフロート状態になります。
そのため、Floatを指定した要素の入れ物であるBOXは中身を空っぽと判断し、天地が確保されないのです。
ところが、IE6-7では独自仕様で自動的に高さが確保されます。
このため、IE6-7を基準にWEBデザインを行うと他のブラウザでは意図通りの表示にならないことが頻繁に起きるわけです。
では、どうするかというとFloatを設定した要素の直後に、新たな要素を追加し、Clear Bothを設定してあげます。
これでFloatが解除され高さが確保されます。
例として「footer」という名前でクラスを指定しDIV要素を追加します。 ■HTML例：ClearBoth設定
ClearBothを指定することでこのようにFireFoxでも高さを確保することができました。

※：ClearBothを使用した場合は注意が必要です。
詳しくは次の記事をご覧ください。