clear: both not working css floats

Question

Non sono sicuro del motivo per cui il mio float non viene cancellato in modo che un contenitore figlio rimanga all'interno del contenitore padre.

Dai un'occhiata a this jsfiddle per vedere cosa intendo. Voglio il div .shadow-wrapper per comprendere tutti gli altri elementi che lo seguono. Come posso ottenere che il contenitore genitore comprenda gli elementi figli?

Answer 1

Utilizzare questa:

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

Per racchiudere elementi mobili è possibile utilizzare qualsiasi seguente:

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

Altra soluzione che utilizza il: dopo che il metodo:

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

Come si può vedere da questo codice, cancellare entrambi non devono essere applicati ovunque, solo dopo l'ultimo elemento flottato, e quindi possiamo usare il metodo after che lo simula.

http://jsfiddle.net/7wja6/

Answer 2

Un'opzione è aggiungere float:left; a .shadow-wrapper.

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

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

Answer 3

Una regola generale per l'utilizzo di carri allegorici e cancella è che se si float un elemento, probabilmente si dovrebbe galleggiare tutti i suoi fratelli troppo. Se ciò sembra problematico, puoi aggiungere un div aggiuntivo come ultimo figlio e cancellare entrambi con quel div, che dovrebbe risolvere il problema.

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