Question

当我使用它时，背景色工作

    header {
        background-color: #bab615;

    }
    nav {
        background: #f96e5b;
        width: auto;
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 1;
        display: block;
        zoom: 1;
    }

但如果我向“nav ul”添加一个浮点数，例如向左飘浮;然后它使两个元素的背景颜色变白......为什么？

     header {
        background-color: #bab615;

    }
    nav {
        background: #f96e5b;
        width: auto;
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 1;
        display: block;
        zoom: 1;
        float: left; <---This
    }

编辑：将#cssmenu更改为nav，因为它是html中的导航编辑＃2：jsfiddle.net/5vjor56y

Answer 1

听起来你需要清除nav中的浮动元素。

你可以在css中这样做：

nav {
  overflow: hidden;
}

这是“clearfix”发挥作用的地方。这是另一种做法的方法：

.nav:after {
  content: "";
  display: table;
  clear: both;
}

clearfix可能是执行此操作的最佳方法，因为您不需要创建html元素，其唯一目的是清除浮动元素。要更深入地了解必须执行此操作的原因，请参阅此css tricks article。

Answer 2

你需要清除漂浮物。

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

或

<br clear="all" />

是两种常见的方式。这应该放在浮动元素的结束标记之后，即：

<nav>
    <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    </ul>
    <div style="clear:both;">
</nav>

为什么在CSS中“浮动”会破坏背景颜色

2 个答案: