floatしたボックスの親要素の内容物を表示する方法

例えば、リストで作成したメニューをfloatで横並びにした場合、親要素（ここではul）の内容が表示されません。ulの内容物が表示されないと、背景やborderが表示されなかったり、marginが効かなかったりして不便です。

その解決方法としては以下の4つがあります。

1. 親要素にもfloatを指定する
2. 親要素にoverflowを指定する
3. 親要素に高さを指定する
4. 親要素にclearfixを指定する

１．親要素にもfloatを指定する

親要素に「float:left;」を指定することで、親要素の高さが算出され、内容物が表示されます。ただし、floatした次の要素は回り込まれたままなので、解除するには「clear:both;」を次の要素に指定する必要があります。

２．親要素にoverflowを指定する

親要素に「overflow：hidden;」を指定することにより、高さが算出されます。回り込みは解除されています。IE6は「zoom:1;」を同時に指定しないと高さが算出されないので注意です。

３．親要素に高さを指定する

親要素の高さが固定の場合は、heightで高さを指定するとよいです。この場合、次の要素は回り込みは解除されていないのですが、指定した高さが内容物より大きければ、次の要素は下段に表示されます。

４．親要素にclearfixを指定する

clearfixというハックを使用することで、親要素の高さが算出されます。比較的古いブラウザにも対応しているので便利です。clearfixは次の要素の回り込みを解除します。

CSSコード

/* モダンブラウザ（Firefox Opera Safari）対策 */
.clearfix:after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
.clearfix{
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html .clearfix{
   height:1px;
}

.clearfix{
   display:block;
}
/* End hide from IE-mac *

各方法で若干、余白や表示領域に差が出ますので、CSSで調節してください。