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 example

.header ul {
    overflow: hidden;
}

...或在ul上设置已定义的高度。

jsFiddle example

.header ul {
    height: 20px;
}

Answer 2

将课程clearfix添加到header，并将以下代码添加到您的css

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

`

当我在<li> - 菜单</li> </div>上使用“float：left”时，<div>背景隐藏

2 个答案: