HTML
<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>
表示
通常の画像とテキストの関係はこの様になります。

画像もテキストの一部として、ベースラインを揃えて表示されます。
このテキストは左側で回りこんでいます。
このテキストも左側で回りこんでいます。
このテキストは左側の回りこみを解除しました。
このテキストは右側で回りこんでいます。
このテキストも右側で回りこんでいます。
このテキストは右側の回りこみを解除しました。
このテキストは両側で回りこんでいます。
このテキストも両側で回りこんでいます。
このテキストは両側の回りこみを解除しました。