html - 如何让父 div 成为其子项的高度？

Question

这似乎是一个非常愚蠢的问题，但我想不通。

我已经将 UL 样式化为水平菜单，但父 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默认情况下，它会在元素 之外添加填充，但实际上不会为其添加宽度/高度，这就是菜单未展开的原因。

要解决此问题，请设置 display:block到 anchor :

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

此外，您不需要“清晰”的 div，添加此 CSS 应该可以解决问题:

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

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

还有一些仅使用 CSS 的“clearfix”技巧可以解决这个问题，而无需添加额外的不必要的 HTML 标记。