<img ... align="right"> の問題点
imgタグにはオプションみたいな各種の付属プロパティがセットになっています。
- src...画像ファイルの名称（拡張子含む）
- width...画像の横幅
- height...画像の縦幅
- border...画像の枠線の太さ
- align...テキストに対する画像の位置
- vspace...画像の上下におけるマージン
- hspace...画像の左右におけるマージン
- alt...画像に対する代替テキスト
問題とされるのは 4,5,6,7 の項目となります。 これらは、CSS によってレイアウトを行います。 配置や余白などの見た目（体裁）に関しては HTML では関与しないコトが望まれるからです。
<style type="text/css">
<!--
img { margin: 20px }
.imgleft { float: left }
.imgright { float: right }
-->
</style>
上記のように指定を行なえば img画像は上下左右に 20px のマージンを取ります。 次は画像を左側に配置してテキストを右側に回り込ませる設定を行ないます。 floatプロパティの値には left right none のいずれかを選択します。 none はデフォルト値であり、回り込みは行なわれない指定になります。
<img src="fireimage.jpg" width="200" height="285" class="imgleft" alt="亡霊と画家">
画像を左側に配置しているので、後続の <p>段落が右側に迂回しています。 class="imgleft" は align="left" に相当する文字列となります。 凡庸クラスとして、{float:left} と {float:right} の内容を持つクラスを作成しておくと便利なものです。
回り込みの解消
.clelef { clear: left }
.clerig { clear: right }
.clebot { clear: both }
-->
</style>
回り込みの解消は HTMLタグでは <br clear="left"> という具合ですが、 これに相当する CSSプロパティは上記の clear: となります。 値に both を入力すると左右どちら側の回り込みも解除して、後続の文字列を画像の下（bottom方向）に配置します。 回り込みの解消は確実に行なった方が良いかと思います。 それと言うのも横幅 1400px のディスプレイで文字サイズを最小にしているユーザーもいるでしょうから、 レイアウトの破綻を防ぐ防波堤の意味を込めて、という理屈からです。
<img src="fireimage.jpg" width="200" height="285"
class="imgleft" alt="亡霊と画家">
<p>
画像を左側に配置しているので、
後続の <p>段落が右側に迂回しています。
class="imgleft" は align="left" に相当する文字列となります。
凡庸クラスとして、{float:left} と {float:right}
の内容を持つクラスを作成しておくと便利なものです。
</p>
<br class="clelef">