インライン要素である画像と文字要素を、１つのボックス内に同居させる方法を確認しよう。その場合、画像の周囲を文字が取り囲むようなスタイルを取ることが考えられる。紙媒体のレイアウト用語で言うところの回り込みだ。
■画像が左側の回り込み
------------------------------
サンプルページ
1.html
（サンプルページは別ウィンドーで開いてください。
ブラウザのソースを見るコマンドでコードを確認してください。）
------------------------------
サンプルページのソースを見ていただけるとおわかりになるかと思うが、画像は段落ブロックを示すpタグの範囲内へ文字素材と一緒にマークアップされている。さらにpタグをdivタグでマークアップして、１つの囲み記事のように整えた。表示結果からは左寄せの画像の周囲に文字が回り込んでいる様子が確認できるはずだ。回り込みの指定はCSS側で行っている。念のため該当箇所のCSSソースを示そう。
--------サンプルソース----------------------
img {
float: left;
margin-right: 10px;
border: 2px solid #0099FF;
}
-----------------------------------------
このimgに対するスタイル知恵気のfloat:left;が、画像を左寄せにするポイントだ。典型的な文字と画像のレイアウト形式である。
■画像が右側の回り込み
------------------------------
サンプルページ
2.html
（サンプルページは別ウィンドーで開いてください。
ブラウザのソースを見るコマンドでコードを確認してください。）
------------------------------
同じ手順で画像を右寄せにすることも可能だ。しかしながらこのスタイルは文字が左揃えの状態では、行末の揃わないところがちょっと気になってしまう。
文字の揃えも右寄せとすれば行末は揃えられるが、ちょっと読みにくいかもしれない【図1】。英文の場合、行は単語単位で折り返されるので右寄せでも文章の意味はなんとか追える。ところが日本語の場合、名詞の途中でもブツブツと行替えされてしまうせいで、読みにくいレイアウトになりがちなのだ。というわけで、画像を右側に配置した回り込みスタイルは、日本語を横組みにした状態には少々馴染まない形かもしれない。
ちなみに回り込みを使う場合は画像の周囲に適度な（作例の場合、画像と文字の接する辺に10ピクセル）余白を設けるとすっきり見やすくなる。また、画像の周囲には無彩色（作例では白）のボーダーを入れると囲み全体に一体感を持たせやすい。
