■フロートさせたブロックレベル要素について（widthの消失/フロートした子要素の高さは含めない）■
▲float させると、width を失う▲
通常ブロックレベル要素は、特に width を指定しない場合、親要素いっぱいに広がりますよね。でも float させるとちょっと事情が変わってきます。
ブロックレベル要素は、float させると幅を失うというか、内包する要素の幅に依存するようになります！！！！
ポイント・基本的にフロートさせた要素には、width を指定するのが決まりのようです。決まった幅を入れたくない場合は、width: auto を指定しておきましょう。※<div> タグに、width を指定せずに float させた場合は、ボックスの幅は、内包するテキストの幅によって変化しています。 ナビゲーションなど、テキストの長さに依存させたい場面などでは、知らず知らずにやってると思うんですけど …。フロートさせたからといって、もともと持つブロックレベル要素の特徴が、全部なくなるという訳ではありません。もともともってる width: 100%（親要素いっぱいに広がる）という特徴を失うだけで、width や height の指定、margin、padding の指定などは普通通りにできます！
▲フロートした子要素の高さは含めないんです
ブロックレベル要素の特徴として、フロートした子要素の高さを、親要素では含めないというルールがあります。言葉では難しいので …。（フロートした子要素の高さは含めないという表現をしていますが、フロートした要素は通常のフロー（流れ）が外れるためにこのような事が起こります）
●よくある例＝横並びのナビゲーションとしてulにliを内包しliにフロートかける。何もしなければliの高さはあるがulの高さが0になりulに背景画像を指定できない。 ※親要素である ul タグは、float した子要素（li タグ）だけしか内包していません。その結果、高さが「0」になっているんです。高さが「0」なら、 背景を指定しても表示されないのは当然ですよね！フロートした子要素を高さを、親要素では含めないというルールによってこうなります。 ?
解決するには・・・●clearfix を使ったり、高さを指定すれば OK
内包している li タグの高さに合わせて、ul タグの高さを出したいなら、clearfix や overflow:hidden を ul タグ（親要素）に指定してあげます。
また、ul タグに高さ（height）を指定すればいいっていうのもあるんですけど、float の解除ということを考えれば、clearfix を使った方がいいかもですねー。clearfix を使ってみると、以下のように高さが出て、背景が表示されました！
＜サンプル＞
<ul> <li class=”corporate”><a href=”#”>会社案内</a></li> <li class=”outline”><a href=”#”>事業内容</a></li> <li class=”contact”><a href=”#”>お問い合わせ</a></li> <li class=”blog”><a href=”#”>ブログ</a></li></ul>
ul{ list-style: none; background: url(../images/ul-bg.png) repeat-x 0 0;}
li { float :left; }
li a{ display: block; float: left; width: 156px; height: 56px; text-indent: -9999px;}
/* ナビごとに背景 */li.corporate { background: url(images/corpotrate.png) no-repeat 0 0; }li.outline { background: url(images/outline.png) no-repeat 0 0; }
li a:hover{ background-position: 0 100%; }