floatは回り込みのCSS

アイスクリームを浮かべた飲み物にコーヒーフロートなどがありますが、この「float」には浮かべるという意味があります。CSSでfloatを指定する際には、サイドバーや画像などを浮かせて左や右へ寄せ、あとに続く要素を回り込ませるのに使用します。

一番よく見かけるのはテンプレートで2カラムにする場合です。メニュー部分のあとに続くコンテンツを右や左に回り込ませ、左サイドバーや右サイドバーのテンプレートにする際によく使用されています。ほか、コンテンツ内で画像を回り込ませる際にも使用されることが多いです。

左サイドバー・2カラムでのfloatの使用方法

こちらはテンプレート内のヘッダー(header:緑)やサイドバー(sidebar:水色)、コンテンツ(content:赤)、フッター(footer:黄)をイメージしたものです。CSSでfloatを何も設定していない場合は回り込みは発生しないので、このように上から順に表示されていきます。

このサイドバー(水色)の箇所に「float:left;」を指定すると、この箇所が浮かびあがって左に寄せられます。そして、支えを失ったコンテンツ(赤)の部分はサイドバーの下にもぐり込む形で左上へ詰めて表示されます。

#sidebar {float:left;}

この状態では、サイドバー(水色)とコンテンツ(赤)の部分が重なって表示されていると考えればよいでしょう。

さらに、コンテンツ(赤)にも「float:left;」を指定すると、この部分も浮かびあがり、水色のサイドバーの横に表示されます。

#sidebar {float:left;}
#content {float:left;}

この場合、コンテンツとサイドバーの両方が浮かびあがったため、フッター(黄)の箇所は支えを失って上へ移動します。

ちなみに、この赤のコンテンツの部分に「float:right;」を指定した場合は右に寄せられます。

#sidebar {float:left;}
#content {float:right;}

さらに、フッターの箇所にも「float:left;」を指定するとフッターも浮かびあがり、水色と赤の次に回り込んで表示されます。

#sidebar {float:left;}
#content {float:left;}
#footer {float:left;}

ただ、この状態ではテンプレートとしては機能しないため、フッター(黄)の箇所に「clear:left;」を指定して回り込みを解除します。

clearでfloatの回り込みを解除する

CSSで「float:left;」などの回り込みを指定した場合、後ろに続く箇所でclearを指定して回り込みを解除する必要があります。この場合はフッター(黄)の箇所で「clear:left;」を指定して回り込みを解除しています。

#sidebar {float:left;}
#content {float:left;}
#footer {clear:left;}

この場合は両方とも「float:left;」ですが、leftとrightの両方のfloatを指定している状態で「clear:left;」を指定した場合、rightは解除されませんので以下のようになります。

#sidebar {float:left;}
#content {float:right;}
#footer {clear:left;}

同じく、「clear:right;」を指定した場合は「float:right;」が解除されます。

#sidebar {float:left;}
#content {float:right;}
#footer {clear:right;}

一般的には、leftとrightのどちらのfloatも解除できる「clear:both;」で指定している人が多いです。ここでは「clear:left;」や「clear:right;」などと記述していますが、できるだけ「clear:both;」で解除することをおすすめします。

また、灰色の部分はサイドバーとコンテンツの親要素の領域になりますが、両方が浮かび上がってしまったため、親要素が子要素を認識しなくなってしまい、親要素内には何もない状態になってしまいます。

この親要素のheightに値を指定していない場合の高さはゼロになりますので、灰色の箇所の高さがなくなってしまい、親要素の背景色などが表示されないケースがあります。

この場合、親要素に「overflow:auto;」を指定することで高さが認識され、この状態を回避することができます。

#main {overflow:auto;}
#sidebar {float:left;}
#content {float:left;}
#footer {clear:both;}

画像に続く文章を回り込ませる方法

画像にfloatを指定することでもあとに続く文章を回り込ませることができますが、当サイトではimgタグに左寄せ、右寄せの「align」を指定することをおすすめしております。

<img src="" alt="" width="" height="" hspace="15" align="left" border="0" />

imgタグにalignの右寄せ、左寄せを指定するだけで、あとに続く文章がこのように自動的に回り込んで表示されます。この回り込みも解除する必要がありますが、改行タグに「clear="all"」を指定するとよいでしょう。

<br clear="all" />

また、この場合、画像の「左右の余白」をhspace="15"で指定していますが、「上下左右」の間隔を個別に指定したい場合にはstyle属性などを使い、以下のように指定するとよいでしょう。

<img src="" alt="" width="" height="" style="padding: 0 15px 0 0;" align="left" border="0" />

このように右の余白のみを15pxで指定した場合は以下のように表示されます。

このstyle属性の箇所については、classなどを指定してスタイルシートの方で指定することもできます。

<img src="" alt="" width="" height="" class="sample" align="left" border="0" />

.sample {padding: 0 15px 0 0;}