floatレイアウトサンプル：テキストの回り込み
それでは、実際のページレイアウトのサンプルとして、図7のようなスタイリングをしてみましょう。
図7 floatレイアウトサンプル（sample04.html）
全体をdiv#wrapperで囲み、見出し、画像、テキストで構成されたよくあるページ構成です。最初の段落では画像を左に配置したいので、画像を囲んだdiv要素に、クラス名img_leftを指定、次の段落では画像を右に配置したいのでimg_rightを指定しました。
リスト8 画像とテキストの配置例／HTML（sample04.html）
<div id="wrapper"> <h1>floatサンプル</h1> <h2>見出しテキスト</h2> <div class="img_left"><img src="sample.jpg" alt="画像サンプル"></div> <p>サンプルテキストです。～中略～</p> <p>サンプルテキストです。～中略～</p> <h2>見出しテキスト</h2> <div class="img_right"><img src="sample.jpg" alt="画像サンプル"></div> <p>サンプルテキストです。～中略～</p> <p>サンプルテキストです。～中略～</p> </div>
画像を左に配置し、テキストを右に回り込ませるにはfloat:leftを指定、画像を右に配置し、テキストを左に回りこませるにはfloat:rightを指定します。画像とテキストの余白がmarginで指定します。また、見出しにはclear:bothを指定して回り込みを解除します。
リスト9 画像とテキストの配置例／CSS（sample04.html）
#wrap {
width: 630px;
margin: 0 auto;
}
.img_left {
margin-right: 20px;
margin-bottom: 20px;
float: left;
}
.img_right {
margin-left: 20px;
margin-bottom: 20px;
float: right;
}
h2 {
font-size: 100%;
background: #333;
margin-bottom: 20px;
color: #fff;
padding: 10px;
clear: both;
}
p {
font-size: 90%;
line-height: 1.5em;
}
この時、見出しの回り込みを解除していないと、図8のように回り込みが続きレイアウトが崩れるので注意しましょう。
図8 回り込みを解除しなかった例
overflow:hidden;で画像の下にテキストが回り込まないようにする
ここで、図9のように、画像の下にテキストが回り込まないデザインにしたい場合には、テキスト（p要素）にoverflow:hidden;を指定します。
図9 overflow:hidden;で画像の下にテキストが回り込まないようにした例
リスト10 画像とテキストの配置例その2／CSS（sample04a.html）
p {
font-size: 90%;
line-height: 1.5em;
overflow:hidden;
}
