CSS【 float 】～浮かせて並べる

floatプロパティは、HTML要素を左側または右側に寄せて配置する際に使用するプロパティです。floatプロパティを指定した要素の後に続く内容は、floatプロパティで指定した要素が配置されていない右側または左側に表示されます。
今回は、段組みなどのレイアウトで重要な役割を担うfloatプロパティについてまとめたいと思います。

1. floatプロパティ

通常、HTML要素は縦方向に順次表示されますが、画像の横に文章が表示されたり、ナビゲーションとコンテンツが左右に並んでいるwebサイトを見たことがあると思います。
このようなレイアウトを実現する際によく使用されるのがfloatプロパティです。

floatプロパティの値は、次の通りです。

　
floatプロパティの値は、継承されません。
また、floatプロパティは、positionプロパティにstatic以外の値が指定されている要素を除き、全要素に使用できます。

float: left

画像とテキストとを順次記述すると、通常は次のように表示されます。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。

　
上の例で、画像を表示する要素のfloatプロパティにleftを指定すると、次のようになります。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。

float: right

上の例で、画像を表示する要素のfloatプロパティにrightを指定すると、次のようになります。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。

　
ソースは次の通りです。

（CSS）
div#sample {margin:0; padding:10px; border:solid 1px #AAA;}
div#sample p {margin:0;}
.smpbox {width:180px; height:180px; margin:5px 10px 10px 0; float:right; /* またはfloat:left; */}

（HTML）
<div class="sample">
  <div class="smpbox"><img src="img/image.jpg" /></div>
    <p>
      彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。
    </p>
  </div>
</div>

▲目次へ戻る

2. floatの解除

2つの要素にそれぞれfloat:leftの指定をすると、左側から横並びに表示されます。
次に、横並びの２つの要素の下に表示させたい要素を記述する場合、次のような表示になることがよくあります。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。

２つの要素の下に表示させたい要素（float指定なし）

　
ソースは次の通りです。

（CSS）
div#sample {margin:0; padding:10px; border:solid 1px #AAA;}
.smpbox {width:100px; height:100px; margin:5px 10px 10px 0; background:#6CF; float:left;}
.smpbox2 {width:100px; height:200px; margin:5px 10px 10px 0; background:#FF9696; float:left;}
.smpbox3 {width:300px; height:300px; margin:5px 10px 10px 0; background:#31A9EE;}

（HTML）
<div class="sample">
  <div class="smpbox"><img src="img/image.jpg" /></div>
  <div class="smpbox2">
    <small>彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。</small>
  </div>
  <div class="smpbox3">２つの要素の下に表示させたい要素（float指定なし）</div>
</div>

　
この現象は、floatプロパティの特徴に原因があります。
floatプロパティは、float（浮動する）の言葉通り、要素を浮かせて移動させる指定をします。

上の例では、float:leftを指定した画像要素とテキスト要素を、浮かせて左側に移動させています。
この２つの要素は浮いた状態にあるという認識のため、浮いたことによって空いた地上スペースに、次の要素（フロート指定のない水色領域）が入っているという状態です。

このようなfloatプロパティの特徴を踏まえて、当初の意図通りの表示を実現するためには、clearプロパティを使用します。

clearプロパティは、floatプロパティによって左寄せ（または右寄せ）指定された要素の、次の要素に対する回り込みの指定を解除するプロパティです。

clearプロパティの値は、left、right、both、の３つです。
leftとrightは、それぞれfloat:left、float:rightを解除するもので、bothは両方を解除します。
解除もれ防止のためにも、特に問題がなければclear:bothを指定します。

clear:bothを指定すると、テキストが回り込まず、水色領域が下に表示されます。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。

２つの要素の下に表示させたい要素（float指定なし）

　
ソースは次の通りです。

（CSS）
div#sample {margin:0; padding:10px; border:solid 1px #AAA;}
.smpbox {width:100px; height:100px; margin:5px 10px 10px 0; background:#6CF; float:left;}
.smpbox2 {width:100px; height:200px; margin:5px 10px 10px 0; background:#FF9696; float:left;}
.smpbox3 {width:300px; height:300px; margin:5px 10px 10px 0; background:#31A9EE; clear:both;}

（HTML）
<div class="sample">
  <div class="smpbox"><img src="img/image.jpg" /></div>
  <div class="smpbox2">
    <small>彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。</small>
  </div>
  <div class="smpbox3">２つの要素の下に表示させたい要素（float指定なし）</div>
</div>

▲目次へ戻る