使用float:left时，CSS背景消失了

Question

这是我的html：

<div class="header_wrapper">
       <div class="main_nav">
       <div>TEst</div>
       <div>TEst</div>
       <div>TEst</div>
    </div>
    <div class="clear"></div>
</div>

正如您所看到的，我想用浮动的div构建菜单。这样做会导致main_nav的背景消失。

.header_wrapper{

    height:129px;
    background:url('images/layout/header.png') no-repeat #1f1f1f;
    border-bottom:1px solid #1f66ad
}

.header_wrapper .main_nav{
    position:relative;
    top:77px; left:336px;
    width:750px;
    background:red;
}

.header_wrapper .main_nav div{
    float:left;
}

.clear{
    clear:both;
}

我尝试使用clear:both，但是背景仍然消失了。有任何想法吗？

- DarkLeafyGreen

---

你尝试过分配高度吗？ - Reza Owliaei

Answer 1

将overflow:auto;添加到main_nav中，可以使背景重新显示。

- j08691

---

使用 overflow:auto; 可能会在某些浏览器中引起问题，例如滚动条可能会出现/消失，或者内容区域可能会被截断。 - coderVishal

Answer 2

这是因为浮动内容不占据任何空间。您的父级main_div元素实际上高度为0，因为它没有其他内容，这样会"隐藏"背景（没有高度可以显示在其后面）。

此信息可在css-floating标签wiki中获取，并且我还发布了其他有关浮动和父容器的更详细信息。

- animuson

---

他说：" main_nav 的背景消失了"，而不是 header_wrapper 的背景。他的 header_wrapper 不应该被折叠，因为他在里面包含了一个清除的 div。 - Sparky

@Sparky672：谢谢，只需要在我的帖子中更改div的名称即可... - animuson

而且它不是父级。 - Sparky

@Sparky672：它是其中分区的父级。 - animuson

是的，它是某个东西的父级...但显然不是他所询问的那个东西的父级，而是目标。 - Sparky

Answer 3

将.main_nav设置为overflow: auto。

.header_wrapper .main_nav div{
    float:left;
    overflow: hidden;
}

您的清除 div 会导致其父元素扩展，但不会影响其同级元素的背景。

- Sparky

Answer 4

您需要清除您的浮动DIV的父容器，即.main_nav。写法如下：

.header_wrapper .main_nav{
  overflow:hidden;
}

- sandeep