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;
}

親要素の高さを子要素に合わせた高さにする
1. overflow:hiddenを追加
2. clearfixを追加

親要素の高さを子要素に合わせた高さにする

作り方によっていくつか方法があると思いますが、overflowを使う方法とclearfixを使った方法についてサンプルコードを書きます。

overflow:hiddenを追加

親要素のクラス（class）のスタイルに「overflow:hidden」を追加すると高さが調整されます。

.border {
  width:300px;
  border:solid 1px #000;
  padding:10px; margin:10px;
  overflow: hidden;
}
.thumbnail {
  float:left;
}
.text {
  margin:0;
}

clearfixを追加

最後の子要素にあとに、clearfixというテクニック（CSS）を追加してフロート（float）をクリアにすると、親要素の高さが子要素の高さに合わせて表示されます。

.border {
  width:300px;
  border:solid 1px #000;
  padding:10px; margin:10px;
}
.thumbnail {
  float:left;
}
.text {
  margin:0;
}
.text:after { 
  content: "";  
  display: block;  
  clear: both; 
}