先日知り合いから、ホームページのデザインが崩れる（回り込みが上手くいっていない）。という話しを聞いたので、本日はfloatとclearについてです。
この2つのプロパティについては、しばしば下記のような表現がされています。

floatは要素を回り込ませる。
clearは回り込みを解除させる。

ザックリ言うとそんな感じなのですが、厳密に言うと違っているのです。詳しい説明については、以下のページを参考にして下さい。

上記サイトによると、「floatとは、通常の流れ（normal flow）から取り除き、右または左に寄せる。」となっています。なにやら、難しい表現ですが、こんな書き方しかないので、仕方ないですね(^^ゞ
厳密なデザインをする上では、上記のサイトに掲載されているルールを正確に理解しておかないと、色々とやっかいな問題が起こってきます。 ただし、今回はその辺をはしょって、簡単な説明をしておきますね。


段組レイアウトをする際にはfloatを使って要素を回り込ませます。

<div style="width: 400px;">
<div style="float: left; width: 100px; background-color: #ff9;">左側のボックスです。</div>
<div style="float: right; width: 300px; background-color: #ff3;">右側のボックスです。</div>
</div>

↓上記表示例↓

左側の
ボックスです。
右側のボックスです。
こんな感じですね。ちゃんと回り込んでくれています。
しかし、その下に回り込ませずに何か（例えばcopyrightなど）を書く場合、どうしましょう。
<div style="width: 400px;">
<div style="float: left; width: 100px; background-color: #ff9;">左側のボックスです。</div>
<div style="float: right; width: 300px; background-color: #ff3;">右側のボックスです。</div>
<div style="width: 400px; background-color: #ff6; text-align: center;">Cpyright © S.T all rights reserved.</div>
</div>

こう書いてみたらどうでしょう。

左側の
ボックスです。
右側のボックスです。
Cpyright © S.T all rights reserved.

copyrightまでが右に回り込んじゃってますよね。お使いのブラウザがInternetExplorerの場合は、もしかしたら、回り込まずに下に表示されているかも知れません。ただし、これは言ってみればInternetExplorerのバグなのです。
これも、webに携わる方ならご存じの方が多いと思いますが、あえて書きます。FirefoxやSafari等モダンブラウザと言われているブラウザでは、W3Cに基づくweb標準で解釈しますが、InternetExplorerでは、HTMLやCSSをちょっと違う解釈で読んでしまうことがあります。勿論モダンブラウザでも違う解釈をすることがあるのですが、InternetExplorerは少し特殊と言えるでしょう。
ただ、少し前までは、ユーザーの大半がInternetExplorerだったため、あまり気にする必要はなかったのですが、現在ではモダンブラウザが結構普及してきたために、インターネットの閲覧環境によって見え方が違うという問題が生じてきたのです。

さて、話を本題にもどしまして、では上記の場合どうしたらいいかということを解説します。その時に利用するのが、clearプロパティなのです。clearはfloatによっる回り込みを解除してくれるプロパティです。ですので、floatが設定されている要素の直後の要素に設定することで、回り込みを解除してくれるのです。

<div style="width: 400px;">
<div style="float: left; width: 100px; background-color: #ff9;">左側のボックスです。</div>
<div style="float: right; width: 300px; background-color: #ff3;">右側のボックスです。</div>
<div style="clear: both; width: 400px; background-color: #ff6; text-align: center;">Cpyright © S.T all rights reserved.</div>
</div>

↓上記表示結果↓

左側の
ボックスです。
右側のボックスです。
Cpyright © S.T all rights reserved.

これが、要素の回り込みの簡単な説明です。最初にも記述しましたが、正確には、

floatは文字の回り込み
clearはfloatの解除

ではありません。きちんと理解したい方は、最初にあげた3つのサイトをしっかりと読んでみてください。

また、floatを解除する方法にclearfixと呼ばれている方法もあります。
この方法は、floatする要素の親要素にafterの擬似要素を見えないようにブロック要素として入れて、この擬似要素でclearするという方法です。
詳しくはgoogleで調べて下さい。