wyczyść: oba nie działają css floats

Question

Nie jestem pewien, dlaczego mój element pływający nie jest czyszczony, aby pojemnik dla dziecka pozostał w kontenerze nadrzędnym.

Spójrz na this jsfiddle, aby zobaczyć, co mam na myśli. Chcę, aby element div obejmował wszystkie pozostałe elementy, które go śledzą. Jak mogę sprawić, aby kontener nadrzędny obejmował elementy podrzędne?

Answer 1

Użyj tego:

.shadow-wrapper { 
    background-color: red; 
    clear: both; 
    overflow:hidden; 
} 

Aby dołączyć płynął elementy można użyć dowolnego z następujących czynności:

float:left; 
overflow:hidden; 
display:table; 
display:inline-block; 
display:table-cell; 

Inne rozwiązanie przy użyciu: po metody:

.shadow-wrapper:after { 
    clear:both; 
    content:" "; 
    display:block; 
} 

Jak widać z tych kodów, jasne, oba nie muszą być stosowane wszędzie, tylko po ostatnim elementem, który jest pływający, a zatem możemy użyć metody after, która symuluje to.

http://jsfiddle.net/7wja6/

Answer 2

Jedną z opcji jest dodanie float:left; do .shadow-wrapper.

.shadow-wrapper { 
    background-color: red; 
    clear: both; 
    float: left; 
} 

http://jsfiddle.net/kMGQC/1/

Answer 3

Ogólna zasada korzystania pływaków i czyści to, że jeśli unosić jedną pozycję, powinieneś unosić wszystkich jego rodzeństwo też. Jeśli to wydaje się być problematyczne, możesz dodać dodatkowy element div jako ostatnie dziecko i wyczyścić oba elementy div, co powinno rozwiązać problem.

<div class="wrapper"> 
    <div class="floating-thing">Hellllllooooo</div> 
    <div class="non-floating-thing">Weeeeeeee</div> 
    <div class="clearfix"></div> 
</div>