「ブロックレベルの子供をもつ」要素の高さは、
必ずしも子供を全て包括しません。
浮動ボックスや絶対位置を決めたボックスは無視されるからです。
包括する親要素が、内側のｆｌｏａｔした要素やを全て含んでいない時
後続の要素にclear（回り込みの解除）を指定すれば解決するが、
その時clearした要素も包括する親要素内になくてはなりません。
しかし後続の要素が特にない場合、
包括する親要素に overflow:hidden 指定しても解決します。
更にこんなページを発見しました。
http://norisfactory.com/stylesheetlab/000039.php
ふむふむなるほど。
包括要素に display: inline-block; かぁ。
「幅と高さを指定できるインライン要素」と書いてある。
インライン（行の中）で表示されるブロック要素の用な表示のよう。
記事によると
対応 ： Opera ・ Safari ･ Mac版IE
非対応 ： Firefox
IEは中途半端な事にインライン要素のみ！？
しかし自分で実験してみると、上記とちょっと違う。
Opera ・ Safari ・ Firefox ・ Google Chrome ・ IE8 は全て対応している様に見える。
Firefoxはバージョンがちがうのかな？
ちなみにバージョンは3.5.9で実験しました。
ついでに最新にアップグレードして3.6.3で実験してみても
もちろんちゃんと対応されていました。
IE6・7は、やはりインライン要素にのみ対応。
それならインライン要素で使えばFLOATの代わりになるのでは・・・！？
因みにＭａｃは持ってません。(*_*;
あと・・・
横並びの時の要素間の隙間は、ソース上の改行コードなので、
ソースの改行をコメントアウトで括れば隙間は無くなります。
明日から使える inline-block
http://versionfive.jp/2010/03/inline-block_wcan2010_spring_lt/