なぜこれらのリンクはdivの高さを変更しないのですか？

Question

リンクは本当に私が間違っているかわからない、すべての "ホルダー" の高さを変更しないでください

HTML：

<div id="holder"> 
<a class="button" href="#"><span>home</span></a> 
<a class="button" href="#"><span>example</span></a> 
<a class="button" href="#"><span>another examp.</span></a> 
<a class="button" href="#"><span>hello</span></a> 
<a class="button" href="#"><span>abc</span></a> 
</div> 

CSS：

*{ 
margin:0; 
padding:0; 
} 
#holder{ 
width:100%; 
background: #000; 
border: 1px solid red; 
} 
.button { 
    color: #444; 
    display: block; 
    float: left; 
    height: 24px; 
    margin-right: 6px; 
    padding-right: 18px; 
} 
.button span { 
    display: block; 
    line-height: 14px; 
    padding: 5px 0 5px 18px; 
} 
.button:hover { 
    background: #333 url('./images/bg_button_a.jpg') no-repeat scroll top right; 
    outline: none; 
} 

.button:hover span { 
    background: #333 url('./images/bg_button_span.jpg') no-repeat; 
} 

Answer 1

要素は、浮動小数点を含むように自動的に拡張されません。

overflow: hiddenを追加すると、のclearfixの1つのタイプであり、エレメントの境界ボックスでエレメントがクリッピングされても構わない限り、最も簡単です。

#holder { 
    overflow: hidden; 
} 

Further Reading。

Answer 2

それはfloat：leftなので、そのようなサブ要素は親の次元を拡張しません。これに対抗する 最も簡単な方法は、子どもたちの終わりに

<div style="clear:both;"></div> 

を追加することです。例：

<div id="holder"> 
    <a class="button" href="#"><span>home</span></a> 
    <a class="button" href="#"><span>example</span></a> 
    <a class="button" href="#"><span>another examp.</span></a> 
    <a class="button" href="#"><span>hello</span></a> 
    <a class="button" href="#"><span>abc</span></a> 
    <div style="clear:both;"></div> 
</div> 

Answer 3

オープンスパンですが閉鎖すると何らかの問題が発生する可能性があります。

<a class="button" href="#"><span>hello</li></a> 

Answer 4

フローティングエレメントは、コンテナの高さを伸ばさないようにしてください。基本的に、それらはすべてコンテナの上部にバインドされています（視覚的にはそうではありません）。

コンテナの下部にあるclear:leftのdivを使用して、浮動要素を含むように展開します。

Answer 5

フローティング要素は、親の高さには数えません。
overflow: hidden;を#holderに設定することは、それを修正するための素敵なトリックです。