一般的なウェブサイトのレイアウトは、CSSを使ったマルチカラムが基本となりますが、コンテンツを配置していく際にはCSSのfloatプロパティが必須となります。このfloatプロパティはコンテンツを浮動化することで左右回り込ませ並べて配置できるようになります。ただし、浮動化させたコンテンツの後に続く要素も同じく浮動化されるので、浮動化のクリアが必要になったり、思わぬところでレイアウトが崩れてしまう原因にもなります。   そこで登場したのが、この「clearfix」という手法です。歴史も古く知名度も高いのでコーディングを経験しているとお馴染みのテクニックですが、今回はclearfixについて詳しく説明していきたいと思います。まずは、コンテンツをfloatさせるところから説明を進めていきます。  

コンテンツを浮動化させて左右に回り込ませるfloatプロパティ

floatプロパティを使うことで、コンテンツは親要素から浮いた状態になり、後に続く要素が左、もしくは右に回りこむように配置することが可能になります。一般的なウェブサイトでよくみかけるマルチカラムのレイアウトはこのfloatプロパティを使って配置されていることが多いようです。  

floatプロパティを使用するとレイアウトが崩れる？

レイアウトを作っていく上でとても便利なfloatプロパティですが、注意点もいくつかあります。  

• ・コンテンツの後に続く要素がすべて左右に回りこんで配置されるため、目的の場所で解除する必要がある
• ・親要素から浮いた状態になるので、親要素へのコンテンツの高さが認識されない

  実際のレイアウトを図にすると下記のようになります。 ※浮動化することにより親要素が子要素の高さを認識しない そこで、この問題を解決するために登場したのがclearfixというテクニックです。  

コンテンツにclearfixを適用させる

では実際にclearfixを使ってみましょう。まずは下記のCSSを追加します。そして、floatを内包する親要素にclearfixのクラスをつけます。そうすると下記のように回り込みの解除と親要素の高さが反映されるようになります。

// HTML
<div id="parent" class="clearfix">
 <div class="child"></div>
 <div class="child"></div>
</div>


// CSS
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {
 display: inline-table;
 min-height: 1%;
}
* html .clearfix {
 height: 1px;
 /*¥*//*/
 height: auto;
 overflow: hidden;
 /**/
}

※子要素の回り込みが解除され親要素の高さが反映される  

clearfixのCSSを詳しく見る

clearfixのCSSを詳しく見てみます。ブラウザ環境の移り変わりと共にいろいろな形に変化していますが、近年の一般的な形は下記のようになります。

// モダンブラウザ
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

// IE7
.clearfix {
 display: inline-table;
 min-height: 1%;
}

// IE6
* html .clearfix {
 height: 1px;
 /*¥*//*/
 height: auto;
 overflow: hidden;
 /**/
}

  after擬似要素を使い、親要素の後に続く高さの無い空の擬似要素を生成します。そして同時にfloatを解除させます。こうすることでレイアウト崩れの問題をクリアにしています。 またafter擬似要素はIE8からの対応になるのでIE7に対してはinline-tableとmin-heightで対応します。さらにIE6ではinline-tableとmin-heightも使えないのでheightで対応します。   ウェブサイトのコーディングではメジャーなfloatプロパティを使ったレイアウトですが、必ずセットで登場するのがclearfixのテクニックです。CSSの進化でdisplayプロパティのtable-cellやFlexboxなども徐々に浸透してきていますが、まだまだ欠かすことができないかと思います。正しく使用してコーディングの効率化に役立ててください。