floatした要素（仮に左カラム、右カラムとする）の高さは親ボックス要素の高さに反映されないので、
背景画像がfloatのかかっていないコンテンツの高さまでで途切れてしまいます。
この場合、通常は親ボックス要素の一番下にclear（clear: both;等）でfloatを解除したボックスを入れる必要があります。
しかし一番下に何か要素が入れられない場合もあります。
空ボックスにclear、height: 0;、visibility: hidden;等を当てるのは構文上無意味なので避けたい。そういう時に「clearfix」を使います。

ソース説明

:afterの疑似要素とcontentプロパティで新たなボックスを入れ、これにclearをあてます。

/*通常の指定*/
.clearfix:after {
content: "."; 　　/* 新しい要素を作る */
display: block; 　　/* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

/*IE6,7用*/
.clearfix {
min-height: 1px;
}

/*Mac IE5.x用*/
* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

親ブロック要素の一番下に入れる要素（上の図のnew box）をCSSで生成する。「.」は他の文字でもかまいません。
clearはブロックレベル要素にあてることになっているので，display: block;とします。height: 0;とvisibility: hidden; で高さのない表示されない要素にします。

/*IE6,7用*/
IE6,7は疑似要素 :after をサポートしていません。
そこで，「要素の幅か高さを指定した場合，floatした子要素の高さも含めて算出する」というIEのバグを使って，枠や背景が途中で切れる問題を解決します。
親ブロック要素に幅が指定してあればOKなのですが，幅が指定できないときは高さを指定します。
IE7のためにmin-height: 1px;を指定します。が，IE6以前ではmin-heightプロパティをサポートしていません。
そこでheight: 1px;としておきます。
「要素の幅と高さが内容物に合わせて押し広げられる」というバグがあるので，1pxでもなかみに合わせて広がることになります。

/*Mac IE5.x用*/
Mac IE5.xはこれでもまだ解決しません。/*\*//*/と/**/に挟まれたところはMac IE5.xのための記述です。（この要素がセンタリングしてある場合，overflow: hidden;をあてるとセンタリングが効かなくなるのを確認しています）
　* htmlをつけるとIE6以前（Mac IE5を含む）でしか効かなくなくなります。（Starハック）
/*\*//*/と/**/で挟んだ部分はMac IE4,5にしか効きません。
XHTMLで親要素（ボックス/wrapper）にclass="clearfix"を入れます。

<div id="wrapper" class="clearfix">
<div id="content">
<p>content</p>
</div>
<div id="menu">
<p>menu</p>
</div>
</div>

引用元参考サイト

clearfixでfloatを解除 http://blog.d-spica.com/entry/070307clearfix.html