css - 当我使用“float：left”时背景隐藏- 菜单

Question

见代码，下面的代码是我的问题；）。

HTML：

<div class="header">
    <ul>
        <li><a href="#">Domov</a></li>
        <li><a href="#">O nás</a></li>
        <li><a href="#">Služby</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</div>

CSS：

.header {
    width: 1000px;
    margin: auto;
    margin-top: 8px;
}

.header ul {
    list-style-type: none;
    background: #363b40;
}

.header ul li {
    float: left;
}

.header a {
    color: #a3a7a6;
    text-decoration: none;
}

我的问题是为什么当我将“float：left”添加到.header ul li时隐藏DIV背景。请问有什么解决办法吗？

Answer 1

发生这种情况的原因是因为它ul正在崩溃，因为它没有任何定义的尺寸。当您浮动子元素时，它会将它们从文档流中取出。当您将它们的位置设置为绝对时，也会发生同样的事情。

你有几个选择..

设置overflow:hidden在父级上，强制它包含子级。

jsFiddle 示例

.header ul {
    overflow: hidden;
}

...或在ul.

jsFiddle 示例

.header ul {
    height: 20px;
}

Answer 2

将类和以下代码添加到您的clearfixcssheader

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}

`