float要素を持つblockの高さを親要素が考慮するための手法:clearfix

CSSでmargin-topとかで間隔あけたつもりなのに、あれ?全然間隔空いてない。ちゅーかレイアウト変!ってときありませんか。ありますよね。僕はあります。
そのたびにCSSがキライになりながら、なんだったっけなーこれ、前にもやったことあるんだけどなーって思いながら対応することありませんか。ありますよね。僕はあります。

そんなワケで対処方法をメモっとこうと。

まず、直前のブロックとの間隔が思い通りに空かない場合、直前のブロックを疑いましょう。
例えば直前のブロックがこう記述されていて、

<div id="container">
  <div id="left">
    <p>左側です。</p>
  </div>
  <div id="right">
    <p>右側です。</p>
  </div>
</div>

そのCSSがこんな感じだとしたら、

#container {
  width: 400px;
  padding:5px;
  border: solid 3px #0000ff; 
}

#left {
  float: left;
  width: 150px;
  height: 100px;
  border: solid 3px;
  color: #ff0000;
}

#right {
  margin-left: 156px;
  border: solid 3px;
  color: #00ff00;
}

実際の表示はこんな感じになります。

これは、「left」はfloatしてるんだけど「right」はfloatしてません。で、親要素の「container」はfloatしている「left」の高さは考慮されずにfloatしていない「right」の高さでサイズが決まってしまいます。

そんなわけで、「container」のしたに別の要素を置いた際に、下記のように「left」とかぶってしまったりします。

で、そんなときに使うのが「clearfixx」というテクニック。
CSSに下記の内容を追加します。

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

.clearfix {
  min-height: 1px;
}

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

で、この「clearfix」を親要素のスタイルに採用します。

<div id="container" class="clearfix">
  <div id="left">
    <p>左側です。</p>
  </div>
  <div id="right">
    <p>右側です。</p>
  </div>
</div>

すると、float属性をもつ「right」要素の高さを考慮して「container」の高さが確保されるようになります。

これで意図していたレイアウトが実現できました。めでたしめでたし。

そんなわけで、clearfixについては下記のサイトを参考にさせていただきました。ありがとうございました。

clearfixでfloatを解除:d-spica

もっと技術的な詳しい内容も記載されているので、詳細を知りたい方はご参照ください。

追記(2013.09.23)
親要素に「overflow: hidden」を追加するって方法もあるみたいです。