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

HTMLサンプル

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

CSSサンプル

div#wrap {
	overflow: hidden;
}

div#navi {
	float: left;
}

div#main {
	float: right;
}

問題点

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

感想

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

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

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

まとめ

• 包容要素にoverflow:hidden;
• ネスケだと包容要素ごと非表示
• 高さを揃える時に1行くらい得
• 覚えといて損は無い程度