[CSS] HTML5BoilerplateのCSSで.clearfixが便利

こんにちは、@yoheiMuneです。
マークアップしている人には当たり前かもしれませんが、HTML5 Boilerplateで公開されているCSSの中身で、「.clearfix」クラスが便利だったので、 ご紹介させて頂きたいと思います。

HTML5 Boilerplateとは

HTML5 Boilerplateとは、 フロントエンドの技術（HTML、CSS、JSや、一部Apacheの設定も）について、 ベストプラクティス（Goodノウハウ）を集めたサイトです。
HTML5 Boillerplateでは、index.html, 404ページ、CSSの基礎内容、JSの書き方など勉強になる事が多く公開されています。

今回は、その中でmain.cssの中身で、「.clearfix」クラスがスゴく便利と感じたので、それを紹介したいと思います。

clearfixクラスとは

.clearfixクラスは、floatの解除用の要素をわざわざ用意しなくても、floatを解除してくれる便利なクラスです。
普通ならfloatのクリアは、以下のようにクリア用のDIVを用意するかと思います。

<div>
  <div style="float:left;">内容１</div>
  <div style="float:left;">内容２</div>
  <div style="clear:left;"></div><!-- float解除用のDIV -->
</div>

しかし、clearfixクラスを利用すると上記の解除用DIVが不要となります。

<div class="clearfix">
  <div style="float:left;">内容１</div>
  <div style="float:left;">内容２</div>
</div>

clearfixクラスの指定内容は、以下となります。

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after{
    content:" ";/* 1 */
    display:table;/* 2 */
}
.clearfix:after{
    clear:both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix{
    *zoom:1; 
}

（引用：main.cssより）
内容としては、.clearfixクラスの:after疑似要素で、floatを解除する設定を行っています。
そのため、わざわざHTML上にfloat解除用のDIVを用意しなくても、回り込み（float）が解除される仕組みとなっています。
これを最初に考えた人、天才ですね(*´∇｀*)

最後に

フロントエンドの開発の仕事を初めて1ヶ月。 その業界の人には当たり前のことでも、自分は知らない事が多々あり、勉強になる毎日です。

そんな中、HTML5 Boillerplateはベストプラクティスを学ぶ事のできる貴重なサイトで重宝しています。
また便利な内容があればご紹介させて頂きたいと思います。

最後までご覧頂きましてありがとうございました。