CSS で大きなボックスの中に横並びにボックスをレイアウトする場合、「float: left」「float:right」を使います。特にサイトのトップページのような複雑なレイアウトの場合は、この「float」を駆使するわけですが、この「float」を閉じておかないと、正しくレイアウトされない原因にもなります。

「container」というボックスの中に「left」「right」がある一番シンプルな構成です。それぞれのボックスに指定されているスタイル（一部抜粋）をテキストで入れてみました。一見、表示には何の問題も無いように見えます。

「container」に枠線を付けてみました。本来「container」の中に入っていなくてはならないはずの「left」「right」が枠線の外になります。

さらに「left」「right」にも枠線を付けると、「container」の下の余白10pxと重なっているのがわかります。

「left」「right」の下に「clear:both」（左右のfloatを解除）を追加すると「container」の中にきちんと納まります。

レイアウト上「.f-clear」の中に何も入れるものが無い場合は、ボックスの高さを0pxにしたり「container」の下に入れた10px の余白の代わりに使用します。

何かレイアウトがおかしいと思ったら、ボックスごとに色や枠線を入れてきちんと表示されるか、もう一度確認してみてください。