当我使用后台隐藏“浮动：左”上 - 菜单( background hide wh

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

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;
}

我的问题是，为什么DIV背景隐藏当我添加“浮动：左”到.header UL里。 任何解决方案吗？

Answer 1:

这是发生的原因是因为所述ul正在崩溃，因为它不具有任何限定的尺寸。 当你漂浮的子元素，他们花出文档的流动。 当你设置他们的绝对位置同样的事情发生。

你有几个选项..

设置overflow:hidden在父，迫使其包含的孩子。

例如的jsfiddle

.header ul {
    overflow: hidden;
}

...或者设置在规定的高度上ul 。

例如的jsfiddle

.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;
}

`

文章来源:

background hide when I use “float: left” on

- menu