CSS Tips 3: float, clear

　Web Page を作る際に、よく要素を横で並べたりするので、リストを使うと、通常縦並びになりますが、このとき、li に float: left をつけると、横並びに変わります。もちろん、li の width を注意しなければならない。一般的に親要素の 100% width を割り算して、設定します。例えば、三つ li の場合、width を 33.33333% に設定します。
　ですが、 float になった要素はポジションとして height が計算されないから、他の要素が上にかぶるとか、親要素が高さが足りないとか、そういうことがたびたび見かけます。
　このとき、親要素の height を設定しましょう。または li:first-child に float: none を設定して、位置とサイズをちゃんと与えましょう。自分の後ろの方法が好きですけど。
　clear: both も一つの方法です。ul の後ろに、div clear の要素を挿入することで、ちゃんと境界が作れいます。通常 div に内容がない場合、height と width がともに 0 ですので、見えないです。 clear : both というのは float の要素と別に、次のブロックを始まります。

それでは。