使用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:两者,但背景仍然消失.有什么想法吗？

Answer 1

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

Answer 2

这是因为浮动内容不会占用任何空间.你的父main_div分区本身的高度为0,因为它没有其他内容,"隐藏"背景(后面没有高度显示).

这个信息可以在css-floating标签wiki中找到,我还发布了有关浮动容器和父容器的其他更详细的信息.