テーブルレイアウトから脱出せよ！第2回

float（フロート）の概念

floatプロパティは、元々ボックスの外側にテキストを回り込ませるためのプロパティです。例えば

ボックスにfloat:leftと指定すると、そのボックスは浮動ボックスとなり、左端に配置され、その後に続くテキストが右側に回り込みます。

同様にfloat:rightと指定すると浮動ボックスは右端に配置され、続きのテキストは左側に回り込みます。

floatを使用する場合に注意する点は3つあります。

1つ目は、CSS2の仕様ではfloatプロパティを指定する場合に、そのボックス自身の幅を（width）を指定しておく必要があることです。この幅（width）を指定しないと一部のWebブラウザで回り込みが反映されない場合があるので注意しましょう。

2つ目は、floatを指定した後に続くボックスはすべて回り込み対象となることです。そのため、回り込みを必要としないボックスの段階で clearプロパティを指定します。float:leftの回り込み解除はclear:left、float:rightの解除は clear:right、左右両方にfloat指定している場合にはclear:bothで両方が解除となります。

3つ目は、floatの指定時にその親ボックスの背景が表示されないという問題です。これに対処する方法は親ボックスのoverflowプロパティにhidden、auto、scrollのいずれかを指定します。この指定の場合、Netscape7.1、Mac IE 5.xでバグが発生します。現時点でのベストな対処法はCSSハックの1つ「clearfix」を使う方法があります。CSSハックについては、本連載の第4回で詳しく解説します。

（画像をクリックすると別ウィンドウに拡大図を表示します）

float（フロート）を使った2段組カラム作成

では、ここからfloatプロパティを使って2段組みのカラムを作成してみましょう。ボックスは「ヘッダー」「フッター」「メインコンテンツ」「ナビゲーション」の4つに、全体を囲む「コンテナ」からなります。前回と同様にそれぞれを

タグ（division区切り）に分けます。

まず

に幅を指定することでページ全体のサイズを固定します。そして「メインコンテンツ」エリアと「ナビゲーション」エリアにそれぞれfloat:right;、float:left;を使い左右に配置します。この場合には必ずwidth（幅）も忘れずに指定してください。最後にフロートを解除するためのclear:both;をフッターに記述して完了です（リスト1、2）。

応用例として、

と

のfloatをleft/right逆に指定するだけで、カラムの左右を入れ替えることができます。これがXHTMLの記述順に依存されず、CSSでコントロールできるメリットです。