使用float:left时CSS背景消失
使用float:left时CSS背景消失
提问于 2012-03-03 02:08:57
这是我的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，但是背景仍然消失了。你知道为什么吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-03-03 02:11:09
将overflow:auto;添加到main_nav会返回背景。
Stack Overflow用户
发布于 2012-03-03 02:12:34
将overflow放在.main_nav上
.header_wrapper .main_nav div{
float:left;
overflow: hidden;
}清除div会强制其父级扩展，但不会影响其同级的背景。
Stack Overflow用户
发布于 2012-03-03 02:11:36
你必须通过clear连接到你的float DIV'的父节点，即.main_nav。像这样写：
.header_wrapper .main_nav{
overflow:hidden;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9538247
复制相关文章
相似问题