CSSで段組レイアウトを実現する方法には、floatとpositionの2つがある。ここではfloatプロパティを使った方法に焦点を当てて解説する。
【floatプロパティの利用】
floatプロパティを利用すると、指定したブロックは指定した方向に寄せられ、その後の内容が回りこむ仕組みだ。
float:leftを指定すると、ブロックは左に寄せられ、隣接する内容が右に回りこむ。
float:rightを指定すると、ブロックは右に寄せられ、隣接する内容が左に回りこむ。
段組レイアウトの実現には、float:left（またはright）を用いてブロックレベル要素を横に並べることで行いる。具体的な例を見てみよう。
【ボックスAの例】
以下のソースコードでは、ボックスAにwidthとfloatを指定している。
html
Copy code
<div id="boxA">
ボックスA
</div>
<div id="boxB">
ボックスB
</div>
<style>
#boxA {
width:300px;
float:left;
}
</style>
この場合、ボックスAは幅300pxで左に寄せられ、ボックスBの内容が右側に回り込み、残りの領域を埋める。しかし、これだけでは完全な段組レイアウトにはならない。ボックスBの内容が多い場合、ボックスBの内容がボックスAの下にも流し込まれてしまいる。ただし、これはfloatプロパティの使い方としては間違いではない。
基礎編ではfloatの仕様とブラウザのバグについて、実践編では4つ（3カラムでは5つ）のボックスとそれらのコンテナブロックを用いたHTMLを例に、floatを利用した一般的なレイアウト方法について詳しく解説する。
ベロリン女
【CSSでの段組レイアウト実現方法】
CSSを用いて、段組レイアウトを実現する方法について解説する。この方法では、floatプロパティを利用する。
【ボックスのサンプル】
以下のコードでは、ボックスAにはwidthとfloatが指定されている。
```html
<div id="boxA">
ボックスA
</div>
<div id="boxB">
ボックスB
</div>
<style>
#boxA {
width:300px;
float:left;
}
#boxB {
width:200px;
}
</style>
```
ボックスBにもwidthを指定することで、ボックスAとBの幅を調整する。
【異なる幅の場合】
ボックスBの幅がボックスAより大きい場合、表示は異なる。ブラウザによっても差異がある。
【floatプロパティと幅指定】
段組レイアウトを正しく表示させるためには、floatプロパティを指定したボックスの直後の要素に幅を指定しない方が良いことがある。
【他の方法】
ボックスBにもfloatプロパティを指定することで、段組レイアウトを試みることができる。ただし、ブラウザによって表示が異なることに注意しよう。
【結論】
段組レイアウトを実現する際には、ボックスの幅指定とfloatプロパティの組み合わせに注意が必要だ。具体的な仕様に基づき、適切な方法を選ぶことが重要だ。
【CSSフロートでの段組実現】
CSSフロートによる段組の仕組みを理解するために、以下の3つの重要な規則を知る必要がある。
1. 左フロートと右フロートの位置関係に制約がある。
2. フロートはできる限り上に位置する。
3. 左フロートはできる限り左に、右フロートはできる限り右に位置する。ただし、上寄せが優先される。
これにより、ボックスの配置は以下の2つのいずれかとなる。
1. 横に並ぶ
2. 縦に並ぶ
さらに、フロートしたボックスの幅の合計が親要素（あるいはウィンドウ）の幅以下の場合には、「できる限り上に」配置される。幅が親要素の幅を超えると、ボックスは左に配置される。これを「カラム落ち」と呼ぶ。
【まとめ】
1. フロートの直後のボックスにはwidthを指定しないこと（IEのバグ対策）。
2. フロートを指定したボックスにはwidthを指定すること（仕様上の決まり）。
3. 段組を作るには両方のカラム（段）にwidthとfloatを指定するのが基本。
4. ボックスモデルについて理解し、margin、padding、borderなどのプロパティも適切に使う必要がある。
フロートを用いた段組の実現には、これらの規則を正しく適用することが大切だ。また、ブラウザの仕様に注意しながら、理想的なレイアウトを構築しよう。
「ブラウザの仕様を切り替える魔法の言葉"DOCTYPE スイッチ"」
ブラウザの表示モードを変える秘密の言葉、それがDOCTYPE スイッチ。文書の冒頭に書かれたこの魔法の言葉によって、ブラウザは異なるモードで文書を解釈する。ざっくり言うと、
ちゃんとしたDOCTYPE宣言があれば、CSSを正しく書いていれば（大体）ちゃんと解釈するよ。間違ったCSSは無視してしまうよ。
DOCTYPE宣言すらないと、CSSの書き方が間違ってるに違いない。だから、間違った解釈に合わせちゃうよ。
ってことなんだ。
じゃあ、どんなDOCTYPE宣言をすればいいのかって？もちろん、バージョンを示すもの。次のDOCTYE宣言を書くことで、(X)HTML文書を標準モードでレンダリングしてくれるよ。
XHTML 1.0 Strict：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01 Strict：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
これらのDOCTYPE宣言を使うと、いくつかの主要なブラウザで標準モードになるようだ。文書のバージョンに合わせて、適切なものを選んでみてくださいね。
「DOCTYPEスイッチ: ブラウザのモード切り替えの魔法」
DOCTYPEスイッチ、その言葉に宿るブラウザの表示モードを切り替える魔法の力。文書の冒頭にこのスイッチを忍ばせることで、ブラウザは異なるモードで文書を解釈する。ざっくり言えば、
ちゃんとしたDOCTYPE宣言があれば、CSSをちゃんと書いていれば（大体）ちゃんと解釈してくれるよ。間違ったCSSは知らないふりをする。
DOCTYPE宣言すらないと、CSSの書き方が怪しいに違いない。だから、間違った解釈に合わせちゃうんだ。
ってことさ。
で、じゃあ、どんなDOCTYPE宣言を使うといいかって？もちろん、文書のバージョンを示すものさ。こちらのDOCTYPE宣言を使うと、主要なブラウザで標準モードになるようだ。
XHTML 1.0 Strict：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01 Strict：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
これらのDOCTYPE宣言を使うと、大抵のブラウザでちゃんと標準モードで表示してくれるよ。文書のバージョンに合わせて、適切なものを選んでみてくれよな。
