初心者にとっての最難関は、clear（both,left,right）ではないでしょうか。私はそうでした。
その名から察するに、何かを消している感じ？そして、解説サイトなどを読み、クリアされるのがfloatであるとと気づきます。「つまり、回り込みは、ここでやめっ！」（floatの解除）
つまり、clear:bothと書けば、後続の要素の回り込みが終了し、以降、通常の縦の流れになります。
例えば、Seesaaのブログの場合（２カラムを例にとると）contentsとlinksのある中段のfloatを解除しないとfooterも中段の横に続いてしまうため、footerでclearしているわけです。
試しに簡単なソースを書いてみるとclear:bothが「ある」「なし」で下のように見た目が変わります。
※clear:leftやrightでも構いませんが、bothは、両方を兼ねるため、bothだけ覚えておけば、特に問題ないです。
（HTML）
<div class="box-A">ああああああああああああああああ</div>
<div class="box-B">いいいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</div>
<div class="box-C">ううううううううううううううううううううううううううううう</div>
（CSS）
.box-A{
background-color:red;
color:white;
float:left;
width:200px;
}
.box-B{
background-color:blue;
color:white;
float:left;
width:200px;
}
.box-C{
background-color:green;
color:white;
clear:both;
width:400px;
}
ということで、めでたくfloatが、解除され、段組ができました。
とりあえず、clearの説明はここまでです。
横方向にボックスを続けるのをやめたいときは、次のボックスにclear:bothを書く。
そんな風に覚えてしまっていいかと思います。
widthは、カスタマイズしない場合は、入れなくても問題ありませんが、
カスタマイズした場合（例：footerを分割する等）、IE6などでは、レイアウトが崩れる場合があります。
バグを考慮するのであれば、入れておいた方がいいはずです。
以下は、CSSの仕様について書かれたサイトを読んだときの覚書なんですが、理解しにくい場合、下の2行だけ覚えちゃってください。
バグを考慮するのであれば、
・clearを指定したら、widthも指定する。（上に書いたこと）
・clearを指定したら、margin-topを指定しない。（下に書きます）
IE6のその他のバグに関しては、こちらをご参照下さい。
---------------------------- ひとまず終了----------------------------
仕様書に関しては、CSSのバージョンによって書き方が違っていたりするらしいのですが、
「clearは、先行するフロートボックスの側面に隣接してよいかどうか指定する」とあり、
「bothは、左右に依らず、先行するあらゆるフロートの流し込みを解除する。
厳密には、要素の“ボーダー上辺”が，先行するあらゆるフロートの外下辺より下に来るよう、上マージンを調整する。」とあるそうです。
つまり、厳密には、それより前にfloat指定したボックスの下になるように、margin-topを増加させることで、それを行っているようです。
上の例では、「ううう…」のボックスにclearを書き込んでいますが、
左右下のmarginは、反映されますが、margin-topだけききません。
仕様上、margin-topが効かないのが、正しいのです。
ところが、IE6では、margin-topが反映されてしまいます。またこれもバグなんですが、
ブラウザによって、見栄えが違ってしまいますので、この点を考慮して、
clearを指定した場合、margin-topは、指定しない。と覚えてしまった方がいいでしょう。
※これに関しては、こちらの記事に詳細を書きました。
間隔を調整したい場合は、上のボックスのmargin-bottomを指定するといいかと思います。
（場合によりますが、clearしたボックスのpaddingでも調整可能です。）
TOP【現在の記事】06）CSSの基礎知識―clear（IE6のバグ含む）
