clearfixを使わないでfloatを解除する方法
(X)HTMLの構造を変更せずに、然るべき場所でfloatを解除するテクニックとして有名なclearfixを使用せずに、floatを解除する方法を紹介します。
clearfixの代わりとして包容要素に overflow: hidden; を指定するとfloatが解除され(た様に見え)ます。以下に具体的なサンプルを記します。
HTMLサンプル
<div id="wrap"> <div class="navi"> <p>ナビゲーションは左側</p> </section> <div class="main"> <p>メインは右側</p> </section> </section>
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行くらい得
- 覚えといて損は無い程度
0