写真やイラストなどの画像と文字（文章）をレイアウトしていく際に、回り込みやレイアウト崩れを防ぐための簡単な方法として、「table タグ」を使った方法があります。

例えば、左側に文章を書き、右側に画像を置き、下に文章を置く場合はHTMLに下記のような記述をしていきます。
———————————–
<table>
　<tr>
　　<td>左文章</td>
　　<td>画像</td>
　</tr>
　<tr>
　　<td colspan=2>下文章</td>
　</tr>
</table>
———————————–

これをfloatを使うと、かなりソースは違ってきます。
———————————–
<div style=”float: right;”>
　画像
</div>
　左文章
<div style=”clear: both;”>
　下文章
</div>

これだけだと簡単に変更できそうですが、floatは意図した通りになりにくいため敬遠されがちです。
しかし使い慣れると非常に便利な物です。本来はCSSにて画像周りの余白設定を「margin , padding」を使って整理しておきましょう。

上記の一例としてはこんな感じです。
＜CSS＞
　.SAMPLE{
　float: right;
　margin: 5px 0px 5px 0px;
　padding-left: 15px;
　}

＜HTML＞
　<div class=”SAMPLE”>
　　画像
　</div>
　　左文章

これは画像を右側に配置させ、画像と左側に来る文章に15pxの空白を維持させて、画像の上下に5pxずつの余白を設けなさいという意味になります。
少しずつCSSを有効に取り入れて綺麗なソースを書いていく事もHTMLの姿であると言えます。

今後のコーディングは、「HTMLに構造を、CSSで装飾を」という形になっていきます。全てHTMLでコーディングするのではなく、CSSをしっかりと使ってレイアウトをまとめていきたいという感じですね。