floatを使った子要素に合わせて親要素を高さを高くする（揃える）方法

子要素でfloatを使用していて、また子要素の高さもその時で変わるので親要素で高さを指定できず、親要素でボーダーを使うと思ったような高さが得られないことがあります。 上の画像のような表示になるサンプル <div class="border"> <img class="thumbnail" src="box.png" /> <p class="text">テキスト</p> </div> .border { width:300px; border:solid 1px #000; padding:10px; margin:10px; } .thumbnail { float:left; } .text { margin:0; } 親要素の高さを子要素に合わせた高さにする 作り方によっていくつか方法があると思いますが、overflowを使う方法とclearfixを使った方法についてサンプルコードを