如何让父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设置为锚点：

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

此外，你不需要“清除”div，添加这个CSS应该可以做到这一点：

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

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

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