clearfixを使わないでfloatを解除する方法

(X)HTMLの構造を変更せずに、然るべき場所でfloatを解除するテクニックとして有名なclearfixを使用せずに、floatを解除する方法を紹介します。

clearfixの代わりとして包容要素に overflow: hidden; を指定するとfloatが解除され(た様に見え)ます。以下に具体的なサンプルを記します。

HTMLサンプル

<div class="wrap">
  <div class="navi">ナビゲーションは左側</div>
  <div class="main">メインは右側</div>
</div>

.wrap {
  overflow: hidden;
}

.navi {
  float: left;
}

.main {
  float: right;
}

この方法には問題が1点あって、ネスケでは.wrap自体が見えなくなってしまいます。ただ、ネスケのサポートも既に終了しているので、そこまで大きな問題では無いかと思いますが、状況次第ではclearfixを使用した方がいいかも知れません。

紹介しといて何ですが、clearfixの方が意味的には正しい感じがしますね。

この方法を使う場面として考えられるのは、.naviと.mainの高さを合わせる時に.wrapにoverflow:hidden;を指定している場合でしょうか（この方法を使うって言うよりはclearfixを使わなくて言い場面って感じですけど）。

一言で言うと「覚えといて損は無い程度の方法」。