p要素の中のimgをフロートして右または左に移動させて、次の段落のp要素のテキストを回り込みをさせたい場合です。
imgの親要素にフロートをかける
HTMLのコードは次のようにimgを囲むp要素にclass名を付けて対象のp要素をフロートさせます。
sampleはこちら
<p class="my_photo"><img src="DSC0025.jpg" width="380" height="255"></p> <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
CSSは次のようになります。background-colorはimgを囲むp要素の挙動がわかりやすいように背景色を着けました。
vertical-alignはpaddingの上下幅を合わせるために入れています。これを使用しないと下のpaddingが微妙に大きくなります。これはimgがインライン要素であるためフォントのベースラインに下方が揃ったために起こります。
.my_photo {
background-color: #FCF;
padding: 5px;
float: right;
margin-left:10px;
}
img{
vertical-align:bottom;
}
img要素自体にフロートをかける
HTMLのコードは次のようにimgに直接class名を付けてimgをフロートさせます。
sampleはこちら
<p class="photo_base"><img src="DSC0025.jpg" width="380" height="255" class="my_photo"></p> <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
.photo_baseに背景色を設定してわかりやすくしましたが、背景色は表示されません。それはimgがfloatしたためにimgをp.photo_baseが囲めなくなっているためです。p要素はそんな状態で放置されることになります。
.my_photo {
padding: 5px;
float: right;
margin-left:10px;
}
.photo_base{
background-color: #FCF;
}
img{
vertical-align:bottom;
}
結果としてどちらもどこかでclearでフロートを解除する必要がありますが、後者の場合はimgを囲むp要素が気持ち悪い状態のまま放置されることを認識しておく必要があります。
.photo_baseにたいしてoverflow:hiddenを使用すると次のような結果になります。
