Фон CSS исчезает при использовании float: left

Это мой 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;
}

Я попытался использовать четкое: оба, однако фон все еще пропал. Любые идеи, почему?

Ответы

Ответ 1

Добавление overflow:auto; в main_nav возвращает фон.

Ответ 2

Это связано с тем, что плавающий контент не занимает места. Ваше родительское подразделение main_div по существу принимает высоту 0, потому что у него нет другого содержимого, которое "скрывает" фон (высота не отображается сзади).

Эта информация доступна в css-плавающей теге wiki, и я также разместил другую более подробную информацию о плавающих и родительские контейнеры.

Ответ 3

Положите overflow на .main_nav

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

Очистка div заставляет родителя расширяться, он не влияет на его родственный фон.

Ответ 4

Вы должны clear для своего родителя float DIV', который .main_nav. Напишите вот так:

.header_wrapper .main_nav{
  overflow:hidden;
}