今更ですが。最近ではIE6,7,8に対応する必要がなくなってきたので clearfixのCSS記述は短くなっています。

● HTMLに記述

<div class="clearfix">
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ：カラム1</div>
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ：カラム2</div>
</div>

● clearfix（今のやり方 Windows IE6 , IE7 に対応する必要が無い場合）

.clearfix:after {content:''; display:table; clear:both;}

clearfix（昔のやり方。参考までに。）

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */