floatは回り込みのCSS

2016年8月25日

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

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

左サイドバー「２カラム」でのfloatの使用方法

こちらはテンプレート内のヘッダー（header:緑）やサイドバー（sidebar:水色）、コンテンツ（content:赤）、フッター（footer:黄）をイメージしたものです。

■floatなし

CSSでfloatを何も設定しない場合は回り込みは発生しないため、このように上から順に表示されていきます。

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

■サイドバーに「float:left;」を指定

#sidebar {float:left;}

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

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

■コンテンツに「float:left;」を指定

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

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

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

■コンテンツに「float:right;」を指定

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

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

■フッターに「float:left;」を指定

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

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

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

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

例えば、フッター（黄）の箇所で「clear:left;」を指定して回り込みを解除するとこのようになります。

■フッターに「clear:left;」を指定

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

この場合はサイドバーもコンテンツも両方とも「float:left;」ですが、例えば、サイドバーに「float:left;」、コンテンツには「float:right;」を指定したとします。このような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;」を指定することで高さが認識され、この状態を回避することができます。