floatした要素の高さは親要素の高さに反映されない

分かりやすいようにXHTMLとCSSの例を書いてみましょう。

<div id="wrapper">
  <div id="content">
    <p>content</p>
  </div>
  <div id="menu">
    <p>menu</p>
  </div>
</div>

#wrapper {
  width: 200px;
  border: solid 3px #999999; 
}

#content {
  float: left;
  width: 124px;
  height: 100px;
  border: solid 3px;
  color: #FF9999;
}

#menu {
  margin-left: 130px;
  border: solid 3px;
  color: #99CC99;
}

wrapperの中のcontentはfloat: left;としてあります。menuはfloatしていません。wrapperの高さはmenuの高さを含みますが，floatしたcontentの高さは含んでいません。

floatを解除した要素を一番下に入れる

親ボックスを下まで（つまり，contentの下辺まで）広げるには，clearでfloatを解除したボックスを一番下に入れておかなければなりません。

ぼくはよくnew boxの部分に「このページのトップへ」のようなものを入れ，このボックスにclear: both;をあてたりしていました。

一番下に何か要素が入れられる場合はよいのですが，入れられない場合はちょっと困ります。たとえばヘッダーのロゴの下に，li要素をfloatさせた横並びのタブメニューを入れたときなど。floatを解除するためにメニューの下にもうひとつボックスを入れるとタブとコンテンツの部分が離れてしまいます。

内容のない空のボックスを入れてclearしたり，height: 0;とかvisibility: hidden;として見えなくしたこともありましたが，見た目だけのためにこのようなボックスを作るのはあまり好ましくありません。XHTMLソースに文書構造上は無意味な要素を書くことになりますから。

<div class="menu2">
  <ul>
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
    <li><a href="#">menu4</a></li>
  </ul>
  <div class="clear"></div>  /*内容のない無意味な要素を入れるのはよくない*/
</div>

clearfixという手法

こうしたややこしい問題を解決してくれるのが clearfix という手法です。:afterの疑似要素とcontentプロパティで新たなボックスを入れ，これにclearをあてるものです。

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

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

親要素の一番下に入れる要素（上の図のnew box）をCSSで生成するのです。「.」は他の文字でもかまいません。clearはブロックレベル要素にあてることになっているので，display: block;とします。height: 0;とvisibility: hidden; で高さのない表示されない要素にします。

IE6,7は疑似要素 :after をサポートしていません。そこで，「要素の幅か高さを指定した場合，floatした子要素の高さも含めて算出する」というIEのバグを使って，枠や背景が途中で切れる問題を解決します。

wrapperに幅が指定してあればOKなのですが，幅が指定できないときは高さを指定します。IE7のためにmin-height: 1px;を指定します。が，IE6以前ではmin-heightプロパティをサポートしていません。そこでheight: 1px;としておきます。「要素の幅と高さが内容物に合わせて押し広げられる」というバグがあるので，1pxでもなかみに合わせて広がることになります。

Mac IE5.xはこれでもまだ解決しません。/*¥*//*/と/**/に挟まれたところはMac IE5.xのための記述です。（この要素がセンタリングしてある場合，overflow: hidden;をあてるとセンタリングが効かなくなるのを確認しています）

• * htmlをつけるとIE6以前（Mac IE5を含む）でしか効かなくなくなります。（Starハック）
• /*¥*//*/と/**/で挟んだ部分はMac IE4,5にしか効きません。

XHTMLで親要素（ボックス）にclass="clearfix"を入れます。

<div id="wrapper" class="clearfix">
  <div id="content">
    <p>content</p>
  </div>
  <div id="menu">
    <p>menu</p>
  </div>
</div>

clearfixの最大のメリットは，CSSでボックスを生成するので，XHTMLソースに無意味な要素を入れないですむことでしょう。classセレクタで記述しておけば，float解除のために繰り返し使えます。

clearfixの記述はCSSファイルのどこかに入れておいて損はないと思います。

参考

• Clearing a float container without source markup
• 構造のマークアップなしでフロートをクリアする方法（上のページの邦訳）
• clearfixハック｜CSS HappyLife

「実践 Web Standards Design」も参考にさせていただきました。

関連

• flaotを解除する3つの方法