段組みレイアウト★フロートのクリア前回、CSSのfloatプロパティを使って2段組みレイアウトを作成しましたが、その影響でレイアウトが崩れてしまいました。今回は、この問題を解決していきます。floatプロパティで要素をフロート(浮遊)させると、後に続く要素も前の要素のフロートの影響を受けてレイアウトが崩れてしまうことがあります。これを避けるには、後に続く要素にclearプロパティを指定して、フロートをクリア(解除)してやる必要があります。clear:left;を指定することでフロートを解除することができます。指定すれば左右どちらのフロートもまとめて解除できます。指定することにしましょう。CSSでclearプロパティを指定する前に、まずはHTMLソース中のフッタ部分をdiv要素で囲んで、それをセレクタとします。index.htmlに以下の記述を追加してください。Reserved.</small></div></div></body></html>保存をしたらブラウザで表示してみましょう。id="footer"というid名を付けるためにdiv要素で囲んだだけなので、この時点では表示に変化はありません。変更前を確認する次に、CSSファイルのbase.cssに以下の記述を追加してください。CSSファイル内のどの位置に記述しても良いのですが、ウェブページのフッタ部分のスタイルなのでCSSソースの最後尾に追加しておきましょう。{clear:both;/*回り込みを解除する*/}保存をしたらブラウザで表示してみましょう。コンテンツの右側に回り込んでしまっていたコピーライト表記が、ウェブページの最下部に配置されるようになりました。コンテンツ部分の白い背景が下まで適用されていれば成功です。前の要素がフロートした影響を受けて、フッタ部分がコンテンツ部分の右側に表示されてしまっていました。指定をすることで前の要素のフロートの影響を解除して、コピーライト表記がウェブページの最下部に表示されるようになりました。フロート要素と親要素の背景カラムとなる要素をフロート配置にした途端、白くしていたはずの親要素の背景が途中で途切れたような表示になってしまっていました。これは、要素にfloatプロパティを指定してフロート(浮遊)させると、レイアウトとしては親要素から浮いた状態になるためです。それまで親要素の中に子要素が入っていたために、子要素の高さの分だけ親要素の背景が連続していたのですが、子要素が浮遊したことで親要素の高さが低くなってしまったのです。それならば、親要素にheightプロパティを指定して高さを指定してやれば良さそうに思えますが、これは上手くいきません。子要素の高さがどの程度になるか分からないのに親要素の高さを決めてしまうと、白い背景部分が高くなり過ぎたり、逆に足りなくなってしまったりするからです。この問題を解決するには、フロート要素の後に続く要素にCSSのclearプロパティを指定してフロートを解除してやる必要があります。スタイルを指定しています。最下部にフロートしていないフッタ部分が子要素として存在していることで、その位置まで親要素の背景色や背景画像が連続するようになります。いう具合に、div要素で情報ブロックをまとめました。した使い方をするdivなどの要素はコンテナ要素と呼ばれます。<div>~</div>の範囲をひとかたまりのブロックにしてレイアウトを操作することができます。CSSでレイアウトを作成するには大変便利な手法であり、HTMLソースとしてもマークアップの誤りにはならないため、つい多用してしまいがちです。コンテナ要素は意味もなく多用するべきものではありません。コンテナ要素は、要素のグループ化やスタイリングには便利ですが、情報的には意味を持っていません。便利だからと言って、何でもdiv要素で囲んでしまうのではなく、他にふさわしい要素が無いかを先に検討します。段落であればp要素、引用であればblockquote要素、リストであればul要素やol要素などでマークアップした上でスタイリングを指定すべきでしょう。コンテナ要素は、他にふさわしい要素が無い場合に、最後の手段として用いるべきものであることを覚えておきましょう。ここまでの制作段階で、サンプルサイトは以下の状態となっています。