ヘッダとフッタを追加する
より実践的になるよう、これまでのサンプルに、ヘッダ（div#header）とフッタ（div#footer）を追加してみましょう。ヘッダ、メイン、サブ、フッタの順に記述し、全体をコンテナで囲みます。ソースは次のようになります。
リスト4 （X）HTMLソース：ヘッダとフッタを追加しコンテナで囲む／01.html
<div id="container"> <div id="header">ヘッダ</div> <div id="main">メイン</div> <div id="sub">サブ</div> <div id="footer">フッタ</div> </div>
左サイドバーのレイアウトになるようCSSを適用してみましょう。メインコンテンツを右、サブコンテンツを左にフロートさせます。また、分かりやすいように、それぞれの領域に背景色を設定しておきましょう。コンテナは緑、ヘッダとフッタは黒、メインコンテンツは赤、サブコンテンツは青の背景色を指定します。
リスト5 CSSソース：左サイドバーレイアウトにし、それぞれの領域に背景色を指定／01.css
div#container {
background-color: green; /* 背景色：緑 */
}
div#header {
background-color: black; /* 背景色：黒 */
}
div#main {
width: 70%; /* 幅：70% */
float: right; /* 右フロート */
background-color: red; /* 背景色：赤 */
}
div#sub {
width: 30%; /* 幅：30% */
float: left; /* 左フロート */
background-color: blue; /* 背景色：青 */
}
div#footer {
width: 100%;
background-color: black; /* 背景色：黒 */
}
「clearプロパティ」でフッタの回り込みを解除する
メインとサブにフロートを設定しているため、このままでは、図3のように、後続のフッタも回り込んでしまいます。また、コンテナの背景色（緑を指定）も反映されません。
図3 フッタの回り込み
これは、バグではなく、「フロートされた要素は親要素（例ではコンテナ）の高さとは無関係に配置される」というCSSの仕様です。親要素の高さが、フロートされた要素を包むように一番下までくるようにするには、図4のように、最後の子要素でフロートを解除する必要があります。
図4 最後の子要素でフロートを解除
このサンプルの場合、フロートされた要素の親要素はコンテナで、コンテナの最後にはフッタが含まれています。従って、フッタに「clear: both」を指定すれば、回り込みが解除され、コンテナの高さをフッタの下まで広げることができます。
リスト6 CSSソース：clearプロパティでフッタの回りこみを解除／01.css
div#footer { clear: both; }
図5 フッタの回り込みを解除
