float直後に高さが親要素に反映されない件

HTML 
<style type="text/css">
#left {
  float: left;
}
</style>
....
<div id="wrap">
  <div id="left">
    <p>....</p>
  </div>
  <div id="content">
    <p>....</p>
  </div>
</div>

みたいなことをしていると#wrapに#leftの高さが反映されない。

これを解決するために、

.clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

というのを入れて、

<div id="wrap" class="clearfix">

とするとよいみたい。

いままでは、

hr {
        margin: 0px;
        padding: 0px;
        height: 0px;
        clear: both;
        visibility: hidden;
        border: none;
}

のようにして、

<div id="wrap">
 ....
 <hr />
</div>

みたいなことをしていたのだが、IEだとhr分の高さを取ってしまうし、文書構造的にどうかと思っていたので、なかなかいい解決方法。

元記事は、http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html
です。感謝。