Web標準、W3C対応、SEO対策、スマートフォンサイト等、HTMLコーディング代行サイトです！全国どこからでもお申し込み可能。

CSSレイアウトではfloat指定がよく使われますが、レイアウト崩れになる原因もfloat指定がらみの場合が多いようです。その中でも特に多いのが、float指定時の回り込み解除忘れでしょう。

回り込み解除のためのコーディングにはいくつかの方法があります。

【改行タグ（br）に埋め込む】

<div>回り込みブロック</div> <br style="clear:both;">

この場合、ブラウザによっては下余白の調節が困難な場合があります。

【空のdivタグに埋め込む】

<div>回り込みブロック</div> <div style="clear:both;"></div>

空のブロック要素が必要になるのであまりお勧めはできません。

【imgタグに埋め込む】

<div>回り込みブロック</div> <img src="○○" style="clear:both;">

回り込み要素の下に画像がある場合は使えますが、ない場合は透明画像を用意しなければなりません。

【次のブロック要素に埋め込む】

<div>回り込みブロック</div> <div style="clear:both;"> コンテンツ </div>

回り込みブロックが複雑な入れ子になっている場合、うまく機能しない場合があります。

CSSレイアウトが一般的になってきたので、これらの方法をうまく使い分けてレイアウト崩れにならないように、工夫したコーディングが必要でしょう。

ちなみに「clear:○○;」は、正確に言うとfloatの解除ではありません。
仕様書では「生成されるボックスの上マージンを増加し、上境界辺がソース文書のそれより以前の要素から生じたあらゆる左浮動ボックスの下外辺よりも下になるようにする。」

つまりは上マージンの自動調節ということで、結果的にfloat解除になるというわけですね。