モダンブラウザ用のclearfix

floatで横並びのレイアウトをつくるときに、floatをかけた要素の高さを親要素が認識せずに、表示が崩れる場合がある。それを回避するためにかけるのがclearfix。

.clearfix:after {
content: "";
display: block;
clear: both;
}

コレを書いて、.clearfixをfloatレイアウトの親要素にかける。
IE6/7対応はもういらないと思うので、zoom: 1;などは省いて良い。これだけ。

参考↓
kojika17.com