floatすると囲っている親要素が潰れてしまって高さが縮んでしまう。そんな煩わしさを一挙に解決する四つのプロパティがこれ。

position:relative;
overflow:hidden;
clear:both;
float:none;

基本的にはこれを潰れてしまう要素に当ててやるだけ。
position:relative は高さ保持には欠かせない。overflow:hiddenは用がなくても当てておけ。clear とfloat:none で滑り止めすれば完璧。

Ie6でもよく効く。

ほかの場面でも困ったらこの四つのプロパティを入れてみると無事になることも多い。

clearfixなんていう懐かしい技があったけど、あれ、アタシ成功したことないんですよ。。。なので念じて考えたらこの四つのプロパティに終着したって感じです。

試してみてね。