html - CSS水平菜单使用 float 和内联显示给包含元素一个高度

Question

两个示例的 HTML:

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

只有 display: inline 的 CSS:

ul {
    background-color: cyan;
    padding-left: 0;
    margin-left: 0;
    float: left;
    width: 100%;
}

ul li {
    display: inline;
}

ul li a {
    padding: 0.2em 1em;
    background-color: #036;
    color: white;
    text-decoration: none;
    border-right: 1px solid white;
}

结果:

https://jsfiddle.net/cbaanvzd/

带有 float: left 和 display: inline 的 CSS

ul {
    background-color: cyan;
    padding-left: 0;
    margin-left: 0;
    float: left;
    width: 100%;
}

ul li {
    display: inline;
}

ul li a {
    padding: 0.2em 1em;
    background-color: #036;
    color: white;
    text-decoration: none;
    border-right: 1px solid white;
    float: left;
}

结果:

https://jsfiddle.net/dy78hzk5/

为什么第二个例子中 float 元素会调整包含元素的高度？现在这里应用了溢出属性或 clearfix。

Answer 1

我不确定为什么，但是如果你想阻止这种情况，你可以从 ul li a 的 css 中删除 float: left; 并将其放在ul li 的 CSS。

JSFiddle:http://jsfiddle.net/dy78hzk5/1/