floatで崩れた?コレでなおせ!テーブルレイアウトを卒業しようこのページに掲載されている内容は、2010年に作成されたものです。スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。「あんまりニーズなくない!?」と思ってしまったので、もーちょいと基本にもどって、アリガチなトラブルへの対処方法をまとめておきます。floatをキワめましょう。CSS講座でもややこしい部分ですね。一度受けていただいた方も是非もう一度整理しておきましょう。floatのおさらいです。floatとはfloatプロパティは、対象の要素を左または右に寄せることができます。floatが設定された要素の後続の要素は、その反対側に回り込みます。これをつかって、段組レイアウトをすることが多いですね。非っ常に重要なのが、次の特徴。考慮するのは通常のフローにおける子供に限る。浮動ボックス及び絶対位置決めボックスは無視され,相対位置決めされたボックスは,位置指定がないものとして考慮される。仕様を訳すとこうなんですね。平たく言い換えると、floatした要素は、親ボックスのheightの算出対象にならない。イメージは、親要素が「家」で子要素が「柱」です。float=柱を引っこ抜く、と考えてみて下さい。柱を抜かれると、家はつぶれてしまいます。全部の柱が抜かれれば、ぺしゃんこになります。親要素の高さが減ったり、ゼロになったりすれば、その後から続いてくる要素もレイアウトがおかしくなるので、何とかする必要があります。clearとはclearプロパティは、float(回り込み)を解除することができます。clearプロパティを使えば、floatによって高さが減った、またはゼロになった要素を元に戻すことができます。レイアウトが元に戻ります。clearプロパティも万能ではありません。高さを戻せない場合があります。戻せるパターン戻せないパターン戻せないパターンは、floatしている要素と同じ階層にclearが指定できる要素がありません。改行タグを連続で入れる空のdivを入れる改行タグを入れてそこにclearの指定をするなどさまざまなバッドノウハウがありますが、やめましょう。HTMLソースに無駄が増えたり、方法によっては微妙にくずれたりなど、いいことがありません。後半で対策をご紹介します。段落ちするときはちゃんと計算して対処divのブロックを左右に並べた2段組を作っていて、右のブロックが崩れて下に落ちた!なんてことがあります。