CSS tło znika po użyciu pływaka: lewy

Question

To jest mój HTML:

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

Jak widać Chcę zbudować menu z pływających div. Spowoduje to zniknięcie tła 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; 
} 

Próbowałem użyć clear: oba, jednak tło jest nadal nie ma. Jakieś pomysły, dlaczego?

Answer 1

Dodanie overflow:auto; do main_nav przywraca tło.

Answer 2

Musisz mieć clear dla rodzica s, który jest .main_nav. Napisz tak:

.header_wrapper .main_nav{ 
    overflow:hidden; 
} 

Answer 3

Put overflow na .main_nav

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

Twój wyczyszczenie div wymusza jego rodzic się rozwijać, to nie ma żadnego wpływu na tle jego rodzeństwa.

Answer 4

Dzieje się tak, ponieważ zawartość pływająca nie zajmuje żadnej przestrzeni. Twój macierzysty podział main_div zasadniczo przyjmuje wysokość 0, ponieważ nie ma innej zawartości, która "ukrywa" tło (nie ma wysokości, która mogłaby być wyświetlana).

Ta informacja jest dostępna w css-floating tag wiki i opublikowałem również inne more detailed information about floating and parent containers.