CSS - float CSS - float| 属性名 | float |
|---|---|
| 値 | left | right | none | inherit |
| 初期値 | none |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| メディア | Visual |
| サポート | C1 / e4 / N4 / Fx1 / Ch1 / Op3.5 / Sa1 |
画像などの表示位置を指定します。img要素の align属性に相当します。left または right を指定すると、テキストがその周りを回り込むように表示されます。回り込みを解除するには clear を用います。
| 値 | 説明 |
|---|---|
| left | 左端に寄せ、右側にテキストを回りこませます。 |
| right | 右端に寄せ、左側にテキストを回りこませます。 |
| none | 回り込みを行いません。 |
| inherit | 親要素の値を継承します。 |
下記は、left で画像を左端に寄せ、右側にテキストを回りこませたサンプルです。
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div style="width:500px; border:1px solid gray; margin:1em"> <img src="../image/back.gif" alt="" style="height:60px; width:60px; float:left"> <div>このテキストは左側で回りこんでいます。</div> <div>このテキストも左側で回りこんでいます。</div> <div style="clear:left">このテキストは左側の回りこみを解除しました。</div> </div> <div style="width:500px; border:1px solid gray; margin:1em"> <img src="../image/back.gif" alt="" style="height:60px; width:60px; float:right"> <div>このテキストは右側で回りこんでいます。</div> <div>このテキストも右側で回りこんでいます。</div> <div style="clear:right">このテキストは右側の回りこみを解除しました。</div> </div> <div style="width:500px; border:1px solid gray; margin:1em"> <img src="../image/back.gif" alt="" style="height:60px; width:60px; float:left"> <img src="../image/back.gif" alt="" style="height:60px; width:60px; float:right"> <div>このテキストは両側で回りこんでいます。</div> <div>このテキストも両側で回りこんでいます。</div> <div style="clear:both">このテキストは両側の回りこみを解除しました。</div> </div>