CSS fondo desaparece cuando se utiliza float: left

Question

Ésta es mi html:

<div class="header_wrapper"> 
     <div class="main_nav"> 
     <div>TEst</div> 
     <div>TEst</div> 
     <div>TEst</div> 
    </div> 
    <div class="clear"></div> 
</div> 

Como se puede ver Quiero construir un menú con divs flotantes. Al hacerlo, el fondo de main_nav desaparece.

.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; 
} 

He intentado usar claro: ambos, sin embargo, el fondo aún no está. ¿Alguna idea de por qué?

Answer 1

Al agregar overflow:auto; a main_nav recupera el fondo.

Answer 2

Tienes que clear para tu padre float DIV' que es .main_nav. Escribe así:

.header_wrapper .main_nav{ 
    overflow:hidden; 
} 

Answer 3

Poner en overflow.main_nav

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

su liquidación de div obliga a sus padres a expandirse, no tiene ningún efecto en el fondo de su hermano.

Answer 4

Esto se debe a que el contenido flotante no ocupa espacio. La división padre main_div toma esencialmente una altura de 0 porque no tiene otro contenido, que "oculta" el fondo (no hay altura para mostrar detrás).

Esta información está disponible en css-floating tag wiki y también he publicado otras more detailed information about floating and parent containers.