画像回り込み

<p><img src="dummy.jpg" class="imgL">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<hr>
<p><img src="dummy.jpg" class="imgR">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

hr {
    clear: both;
}
.imgL {
    float: left;
    margin: 0 1em 1em 0;
}   
.imgR {
    float: right;
    margin: 0 0 1em 1em;
}   

<div class="floatImage">
<p class="flL"><img src="images/dummy.gif"></p>
<div>
<p>画像を左に配置した場合。</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
<!-- /.floatImage --></div>

<div class="floatImage">
<p class="flR"><img src="images/dummy.gif"></p>
<div>
<p>画像を右に配置した場合。</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
<!-- /.floatImage --></div>

.floatImage,
.floatImage > div {
    overflow: hidden;
}
.flL {
    float: left;
}   
.flR {
    float: right;
}   
.floatImage .flL img {
    margin: 0 1em 0 0;
}   
.floatImage .flR img {
    margin: 0 0 0 1em;
}