CSSレイアウト崩れの原因 - 回り込み解除（clear）の指定忘れ
CSSレイアウトは、「float」というプロパティを指定し、DIVタグを左右に寄せることで配置するものですが、この「float」を解除しないと、左右に寄せたDIVタグの後に記載したものが上位のDIVタグに回りこんでしまい、崩れを生じさせます。
右のイラストは、floatを解除しなかったことによる崩れの例です。
少々分かりにくいのですが、本来であればページ最下部にくるべきフッター（コピーライト表示）部分が、floatの解除がないためそのままメインスペース部分に回りこみ、サイドバーの直下に表示されてしまっています。
このようにならないよう、floatを解除するためのプロパティが「clear」です。回り込ませたくない部分のセレクタに「clear:both」と記載することで、回り込みが回避されちゃんと下に表示されるようになります。
clear用のセレクタを用意しておくのもひとつの方法です。
[HTML上の記載]
<div class="clear"><hr /></div>
[CSSの記載]
.clear { clear:both; }
.clear hr { display:none; }
「clearセレクタが指定された部分でfloatを解除します。clearセレクタが指定されたタグの中にあるhrタグは非表示にします。」という指定です。これなら、回り込みを解除したことをHTML上で確認でき分かりやすいですし、ブラウザ上でも目立ちません。
どのような方法を取るにせよ、floatさせた後でclearすることで回り込みを解除することができますので、CSSでレイアウトする際は、必ず指定するようにしましょう。