HTML/CSS floatを無駄なく解除する方法

現在はHTML、CSSコーディングの知識を深めようと思い勉強中なのですが
最近知った、感心したものをひとつ、ご紹介したいと思います。

私は普段、floatを解除する際はCSSにて

    .clear {
        clear:both;
    }

を用意して置き、

    <div class="float_a"> ～～～ </div>　/*float要素a*/
    <div class="float_b"> ～～～ </div>　/*float要素b*/
    <div class="clear"></div>　/*float解除*/

という手法を取っていましたが、空のdiv要素をコードの中にいくつも配置するのは美しくありません。
もっと良い方法はないかと思い他の社員の方に聞いてみた所、こんな方法もあるよと教えてくださいました。

CSSにて

    /*IE7以外のモダンブラウザ向け*/
    .clearfix:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }

     /*IE7およびMacIE5向け*/
    .clearfix{ display:inline-block; }

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

そして

    <div class="float_box clearfix"> /*floatの親要素＋clearfix*/
        <div class="float_a"> ～～～ </div>　/*float要素a*/
        <div class="float_b"> ～～～ </div>　/*float要素b*/
    </div>

と記述することにより、親要素が閉じた瞬間にfloatが解除されます。

一度覚えてしまえば何てことはないですし、状況によっては前者の方が良い場合もありますが
選択肢が増えるという事は、それだけきれいにコードが書けるようになるという事です。
たくさんの知識を増やして、常にきれいなコードが書けるよう心がけたいですね。