親divに子の高さを設定するにはどうすればよいですか？

Question

これは本当にばかげた質問のようですが、わかりません。

私は水平メニューにスタイルを設定しましたが、親divは子要素の高さに調整されません。ここjsFiddleです：http://jsfiddle.net/STSjm/202/

HTML

<div class="menu"> 
<ul> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
</ul> 
<div class="clear"></div> 

とCSS：

.menu { 
    background: blue; 
} 

.menu li{ 
    float: left; 
    background: green; 
} 

.menu li a{ 
    background: red; 
    padding: 25px 25px 25px 25px; 
} 

.menu li a:hover{ 
    background: orange; 
} 

.clear { 
    clear: both; 
} 

Answer 1

はここで何が起こっているのです：

あなた<a>要素は、パディングを持っていますが、それらはdisplay:inline実際には幅/高さを追加するのではなく、埋め込みをの外側に追加します。そのため、メニューは展開されません。

.menu { 
    float:left; 
    width:100%; 
} 

：トリックを行う必要があり、このCSSを追加し、

http://jsfiddle.net/STSjm/216/

また、あなたは "クリア" のdivを必要としません。この問題を解決するには

は、アンカーにdisplay:blockを設定しました

http://jsfiddle.net/STSjm/218/

余分な不要なHを追加することなくこれを解決するためのCSSのみの「clearfix」トリックもありますTMLマークアップ。