hamashun.com

2007 05 15 修正および追記

子要素（ここでは画像）をfloatさせると、親BOX（ここではグレーの部分）の高さは親BOXの内容（ここではテキスト）に沿ったサイズになります。
その結果、このスクリーンショットのようになってしまいます。
子要素（画像）の下部にまで背景色を表示させたい場合などに不都合が生じてしまいますので、これを解決する方法を3種類ご紹介します。

なお、この現象はバグではなく、CSS2の仕様上で正しい動作となっています。

何も指定していない状態

#parent {
 margin:50px;
 background:#ccc;
}

img {
 float:left;
}

<div id="parent">
 <img src="16_01.jpg" width="300" height="469" alt="" />
 <p>画像に深い意味はありません。</p>
</div>

これが最初の状態です。 サンプル

親要素に高さを指定する

#parent {
 height:469px;
 margin:50px;
 background:#ccc;
}

CSS側のみの変更です。
親要素（#parent）に画像と同じサイズのheightを指定します。
若干安易な手法です。 サンプル

要素を追加してclearさせる

#parent {
 margin:50px;
 background:#ccc;
}

#clear {
 clear:both;
}

<div id="parent">
 <img src="16_01.jpg" width="300" height="469" alt="" />
 <p>画像に深い意味はありません。</p>
 <div id="clear"></div>
</div>

要素（ここでは<div id="clear">）を追加して、そこでclearさせます。
その子要素が、構造として存在しうる場合には問題ありません。 サンプル

clearfix

/* clearfix */
.clearfix:after {
 content:"."; 
 display:block; 
 height:0; 
 clear:both; 
 visibility:hidden;
}

.clearfix {
 display:inline-block;
}

/* hide mac ie \*/
* html .clearfix {
 height:1%;
}
.clearfix {
 display: block;
}
/* end */

<div id="parent" class="clearfix">
 <img src="16_01.jpg" width="300" height="469" alt="" />
 <p>画像に深い意味はありません。</p>
</div>

Position Is Everythingというサイトで紹介されているテクニックです。 .clearfixというクラスを付けた要素で動作します。 サンプル
まずは1番目のブロックの解説です。
ここでは、WinIEが対応していない事から余り使われていない、:after擬似要素を使います。
:after擬似要素とは、その要素の後（after）のスタイルを指定する為の物です。
これについての詳しい解説は、またいつかしたいと思います。

その.clearfix:afterのプロパティに、content:".";を記述します。
このcontentプロパティは値を追加する動作をする物で、料理でいうスパイスのように、目立たないけどニクイ仕事をしてくれます。
今回のケースでは、実際に"."という文字列が必要な訳ではありません。
"."は場所を確保する為に必要なだけで、続くheight:0;やvisibility:hidden;で見えないように隠してしまいます。

visibility:hidden;の効果は、中身が消えて場所はそのまま残るという物です。
そして、そこに指定されるclear:both;。
つまり、content:".";で確保した場所にclear:both;が動作する訳です。
2つ目に紹介したテクニックを、余計なdivを追加しないで行えるんですね。

次に2番目のブロックの解説です。
display:inline-block;はCSS2.1で追加されるプロパティで、ブロック要素として生成するが、それ自体はインライン要素として配置されるという、小難しい効果となっています。 これはIE7の為の指定です。

最後の3番目のブロックは、定番の手法であるThe Holly HackでWinIEのみを修正している部分です。