段組みレイアウトの完成：BとCの横並び、そしてクリアによるフロートの制御
全体のレイアウトを整えるために、CSSスタイルの指定が必要だ。ボックスBとボックスCを横に並べるため、それぞれの要素に幅とfloat:leftを指定する。これにより、ボックスBとボックスCは画面上で横一列に配置される。また、ボックスDにはclear:leftを指定して、フロートの影響をクリアすることで、段落が正しく配置される。
さらに、ブラウザのデフォルトスタイルシートの差異を吸収するために、全称セレクタ（*）を使用して要素のmarginとpaddingを0に設定する。これにより、デザインの一貫性が保たれる。
要素の配置はCSS2の仕様に基づいて行われる。左フロートの要素が前に出現し、かつそれらの外端が重ならないように配置される。さらに、フロート要素はできる限り上に位置しなければならない。
#container {
width:700px;
}
#boxB {
width:400px;
float:left;
}
#boxC {
width:300px;
float:left;
}
#boxD {
clear:left;
width:100%;
}
段組みレイアウトを完成させるために、これらのステップを正しく行いよう。このレイアウトは、典型的なウェブサイトのヘッダー（A）、本文（B）、メニュー（C）、フッター（D）を整理するのに役立つ。これにより、コンテンツの整然とした表示が実現され、ユーザーエクスペリエンスが向上する。
BとC、横並びに調整
ウェブデザインの魔法のステップ、要素の位置関係を調整する方法をお伝えする。あなたのウェブページに新たな魅力を注入すること間違いなしだ！ここでは、"全称セレクタ（*）"を駆使し、要素の余白とパディングをゼロに初期設定するテクニックを使用する。これにより、ブラウザのデフォルトスタイルシートの差異をリセットし、独自のデザインを実現する。
* {
margin:0;
padding:0;
}
#container {
width:700px;
}
#boxB {
width:400px;
float:left;
}
#boxC {
width:300px;
float:left;
}
まずは、幅指定を容易にするために、#containerに幅を設定する。この<div>要素は、後でフロートするコンテナブロックとして機能する。そして、ここからが本番、#boxBと#boxCに幅と共にfloat:leftを指定する。なお、floatを指定する場合、明示的に幅を設定する必要がある（img要素など、自体に幅を持つ要素は除外だ）。
ここで、ボックスBとボックスCが華麗に横並びとなる！この挙動は、CSS2の仕様に基づいており、その根拠を以下に説明する。
一つのボックスが左フロートを持ち、その前に現れた要素が同様に左フロートを生成する場合、後者の外側の左辺は前者の外側の右辺よりも右に配置されなければならない。または、後者の外側の上辺は前者の外側の下辺よりも下に配置されなければならない。右フロートの場合も同様の規則が適用される。
フロート要素の外側上辺は、その前に出現する要素が生成するブロックボックスまたはフロート要素の外側上辺よりも上に配置されてはいけない。
自身の左側に他の左フロートを持つ要素の外側右辺は、コンテナブロックの右辺よりも右に出ることは許されない（簡単に言えば、左フロートはできるだけ左に寄せられるべきであり、コンテナブロックの右辺を突き抜けてはならない）。右フロートも同様の規則が適用される。
フロート要素はできるだけ上に配置されるべきだ。
左フロートはできるだけ左に、右フロートはできるだけ右に配置されるべきだ。ただし、上寄せはできる限りの優先度を持つべきだ。
これにより、ボックスCは見事にボックスBの右側に配置され、ボックスBとボックスCの高さが同じに揃うのだ。もし、ボックスCの幅が301px以上あり、ボックスBとCの合計幅がコンテナブロックの幅を超える場合、2番の規則の後半、7番、9番の規則に従って、ボックスCはボックスBの下側で左端に配置される。これを「カラム落ち」と呼ぶ。
**スタイルと構造を整える ― ブログの理想的な段組み**
ウェブデザインの世界では、スタイリッシュなレイアウトと構造が重要だ。ユーザーに視覚的な魅力を提供することはもちろん、読みやすさやユーザビリティを向上させる要素でもある。そこで、今回は「ステップ 2. ボックスC の幅が 301pxの場合のサンプル」について見ていきよう。
#boxD を、clear:left と width:100% というボックス幅の制御を適用することで、バラバラだった要素をうまく統合する。その結果、目指す段組レイアウトが実現され、ページの美しさと整合性が向上する。
さらに進んで、「ステップ 3. clear による float の制御のサンプル」を見てみよう。これには width:100% がない場合のケースも含まれるので、これをIEで確認してみると良いろう。
clearプロパティは、ブロックレベル要素に適用され、floatの制御を担当する。一般に「float を解除するプロパティ」と説明されることが多いが、実際には9.5.2の仕様書に基づき、先行するフロート配置のブロックボックスと隣接しないように指定するものだ。ここではボックスBとボックスCの配置が該当する。
clearが適用されると、ボックスの上外辺（上マージン）が、先行するフロートの外下辺よりも下に来るように調整される。これにより、段組レイアウトの完成度が高まる。
最後に、#container、#boxB、#boxC、#boxDに対する指定を見てみよう。ボックスBとCにfloat:leftを適用することで、要素が横に並び、フロートの整形規則が適用される。さらに、ボックスDにclearを指定することで、ボックスDの上辺はボックスBとCの外下辺よりも下に配置されるため、レイアウトの一貫性が保たれる。
#container {
width:700px;
}
#boxB {
width:400px;
float:left;
}
#boxC {
width:300px;
float:left;
}
#boxD {
clear:left;
width:100%;
}
以上の手法を用いることで、ヘッダー（A）、本文（B）、メニュー（C）、フッター（D）などの典型的なウェブページの構成を実現できる。美しいデザインと整った構造、そして視覚的な魅力を持つウェブページを作り上げるために、これらのテクニックをぜひ活用してみてください。
