画像などの表示位置を指定します。img要素の align属性に相当します。left や right を指定すると、テキストがその周りを回り込むように表示されます。回り込みを解除するには clear を用います。

<div style="width:500px; border:1px solid gray; margin:1em">
  通常の画像とテキストの関係はこの様になります。
  <img src="../image/back.gif" alt="" style="height:60px; width:60px;">
  画像もテキストの一部として、ベースラインを揃えて表示されます。
</div>

<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>

通常の画像とテキストの関係はこの様になります。 画像もテキストの一部として、ベースラインを揃えて表示されます。

このテキストは左側で回りこんでいます。

このテキストも左側で回りこんでいます。

このテキストは左側の回りこみを解除しました。

このテキストは右側で回りこんでいます。

このテキストも右側で回りこんでいます。

このテキストは右側の回りこみを解除しました。

このテキストは両側で回りこんでいます。

このテキストも両側で回りこんでいます。

このテキストは両側の回りこみを解除しました。

• http://www.w3.org/TR/CSS1/#float
• http://www.w3.org/TR/CSS2/visuren.html#float-position
• http://www.w3.org/TR/css-page-floats-3/#float-property
• http://momdo.github.io/css2/visuren.html#float-position
• https://developer.mozilla.org/ja/docs/Web/CSS/float
• http://caniuse.com/#search=css%202.1%20properties