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：两者，但背景仍然消失。有什么想法吗？

Answer 1

将overflow:auto;添加到main_nav会带来背景。

Answer 2

这是因为浮动内容不会占用任何空间。您的父main_div分区的高度基本上为0，因为它没有其他内容，“隐藏”背景（后面没有高度显示）。

此信息位于css-floating tag wiki，我还发布了其他more detailed information about floating and parent containers。

Answer 3

将overflow放在.main_nav

上

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

您的结算div强制其父母进行扩展，这对其兄弟的背景没有任何影响。

Answer 4

您必须clear到float DIV'的父母.main_nav。写得像这样：

.header_wrapper .main_nav{
  overflow:hidden;
}

使用float：left时CSS背景消失

4 个答案: