Ответ 1
Добавление overflow:auto;
в main_nav возвращает фон.
Это мой 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;
}
Я попытался использовать четкое: оба, однако фон все еще пропал. Любые идеи, почему?
Добавление overflow:auto;
в main_nav возвращает фон.
Это связано с тем, что плавающий контент не занимает места. Ваше родительское подразделение main_div
по существу принимает высоту 0, потому что у него нет другого содержимого, которое "скрывает" фон (высота не отображается сзади).
Эта информация доступна в css-плавающей теге wiki, и я также разместил другую более подробную информацию о плавающих и родительские контейнеры.
Положите overflow
на .main_nav
.header_wrapper .main_nav div{
float:left;
overflow: hidden;
}
Очистка div
заставляет родителя расширяться, он не влияет на его родственный фон.
Вы должны clear
для своего родителя float DIV'
, который .main_nav
. Напишите вот так:
.header_wrapper .main_nav{
overflow:hidden;
}