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

/*親ボックス */

.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要素が指定されている場合でもこの現象は起こったような気がします。
親ボックスの背景に画像を指定し、子ボックス内のテキスト等で高さを自動的に拡張するレイアウトの場合、 上記ハックを使う事が無難と言えるでしょう。

「一部上場企業の採用ページ」の紹介。

この会社は水処理業界で有名な会社で、これまで垢抜けずフレームを使うなどの昔の世代に作成したページを一変したいと、2006年11月1日にリニューアルしました。細かい企画を順次追加しつつ、大方の企画が落ち着き一段落ついたサイトです。
何故企画の進行具合が分かるかと言うと、私がメインになって、このサイトを構築したからです。
携わった内容としては、

• プランニング
• ディレクション
• サイト設計
• 下層デザイン
• コーディング

とほとんどの作業を行いました。かなり個人で動いた部分が多いので、（独りだけとは言いませんが）管理人個人として「サイトを作ったぞ」という印象が強いサイトです。
構成はあくまでよくある採用ページに準じたものですが、要所要所で 新卒者の目を引く企画やデザインを取り入れ、なかなか良いサイトに仕上がっています。

こちらのサイトの詳しい情報を希望される方は、フッタのcontactにて承っております。
（って誰もいないか。）

http://www.Loreille.com

アメリカのWEB制作会社のWEBサイト。
このサイトの影響で、管理人の進むべく方向性が決定したサイトだと言えます。
このような感覚のサイトを作りたいと何時も考えていますが、やはりなかなか難しいです。