1. トップページ >
  2. コーディング関連情報 >
  3. コーディングコラム >
  4. float指定の解除方法いろいろ

コーディングコラム

float指定の解除方法いろいろ

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

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

【改行タグ(br)に埋め込む】

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

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

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

【imgタグに埋め込む】

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

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

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

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

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

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