上記の場合で、親ボックスが子ボックスを内包する対処方法が以下。

/*親ボックス */

.oya {
width: 500px;
}

/* 以降clearfixハック */

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

.oya { display: inline-block; }

/* Except MacIE ¥*/
* html .oya { height: 1%;}
.oya { display: block; }
/* End */

これから制作する時は、上のソースを貼付けるようにしようっと。
で、とある解説で、この現象は親ボックスの高さはfloat指定されていない要素で決まるからとの事ですが、 実際、子ボックス2にfloat要素が指定されている場合でもこの現象は起こったような気がします。
親ボックスの背景に画像を指定し、子ボックス内のテキスト等で高さを自動的に拡張するレイアウトの場合、 上記ハックを使う事が無難と言えるでしょう。