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が解除されます。

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

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

渡辺 正毅

1984年生。サンフランシスコ育ち。大学から憧れの日本に留学し、そのまま移住。2006年慶應大学SFC卒。2007年BPS株式会社設立。いい国ですよね。もっとよくしたい。好きになってくれる人を増やしたい。

渡辺 正毅の書いた記事

夏のTechRachoフェア2019

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ