Come cancellare: entrambi; correttamente?

Question

<style> 
.cl {clear:both;} 
.block {} 
.left {float:left;} 
</style> 

<div class="block"> 
    <div class="left">Title 1</div> 
    <div class="left">Value 1</div> 
    <div class="cl"></div> 
</div> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
    <div class="cl"></div> 
</div> 

È possibile evitare di aggiungere <div class="cl"></div> alla fine di ogni .block?

Answer 1

Provare a utilizzare overflow:hidden su .block So che a volte lo risolverò.

Answer 2

Si potrebbe fare questo:

<style> 
    br {clear:both;} 
</style> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
</div> 
<br/> 

un'opzione secondo re: @animuson commento

<style> 
    .container br {clear:both;} 
</style> 
<div class="container"> 
    <div class="block"> 
     <div class="left">Title 2</div> 
     <div class="left">Value 2</div> 
    </div> 
    <br/> 
</div> 

Answer 3

Ci sono due comuni soluzioni a questo problema.

1. Aggiungere overflow: hidden al genitore degli elementi mobili (quindi in questo caso, .block).
2. Usa "clearfix": http://nicolasgallagher.com/micro-clearfix-hack/

Alcuni maggiori informazioni qui: Is clearfix deprecated?

---

Un buon momento per usare clear: both è quando si già hanno un elemento a disposizione per aggiungerla.

Per esempio, il caso comune di colonne galleggiavano con un piè di pagina: http://jsfiddle.net/thirtydot/vhBkM/

Answer 4

non dovrebbe essere necessario i <div class="cl"></div> div a tutti. Basta mettere il clear: both sul blocco div.

Esempio: http://jsfiddle.net/mKazr/

CSS

.block { 
    clear: both; 
    overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */ 
} 
.left { float:left; } 

HTML

<div class="block"> 
    <div class="left">Title 1</div> 
    <div class="left">Value 1</div> 
</div> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
</div> 

Edit: aggiunto il codice