Cómo borrar: ambos; ¿correctamente?

<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>

¿Es posible evitar agregar <div class="cl"></div> al final de cada .block?Cómo borrar: ambos; ¿correctamente?

Fuente

2011-09-07 Kirzilla

¿Ha intentado utilizar algo como '.block: tras {clear: both} ¿? Nunca he intentado usar los selectores anteriores o posteriores, así que no sé cómo funcionan. – animuson

Probar usando overflow:hidden en el .block Sé que a veces lo arreglará.

Fuente

2011-09-07 15:10:44 brenjt

usted puede hacer esto:

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

una segunda opción de re: @animuson comentar

<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>

Fuente

2011-09-07 15:11:56 Eonasdan

Sin embargo, debería usar un nombre de clase para el descanso, por lo que no se aplica a * todos * descansos en su documento. Pero si haces eso, no es realmente diferente al ejemplo del OP. – animuson

sí, es por eso que lo hice en el nivel de elemento – Eonasdan

Hay dos comunes soluciones a este problema.

Añadir overflow: hidden a los padres de los elementos flotantes (por lo que en este caso, .block).
Uso "clearfix": http://nicolasgallagher.com/micro-clearfix-hack/

Algunos más información aquí: Is clearfix deprecated?

Un buen momento para utilizar clear: both es cuando se ya tienen un elemento disponible para añadirlo a.

Por ejemplo, el caso común de columnas flotaban con un pie de página: http://jsfiddle.net/thirtydot/vhBkM/

Fuente

2011-09-07 15:15:02 thirtydot

+1: Use 'overflow: hidden' para forzar que los flotantes permanezcan dentro de un elemento de bloque. 'clear' es la herramienta incorrecta para el trabajo. –

@ Søren Løvborg ¿por qué está 'claro' mal para el trabajo? pregunta genuina para la experiencia de aprendizaje. – Eonasdan

@Eonasdan: Funciona, pero hay alternativas más limpias. 'overflow: hidden' implica agregar solo ..' overflow: hidden' al CSS, que es más limpio que agregar un elemento extra en el HTML con el único propósito de borrar carrozas. Mientras que clearfix implica agregar solo una clase adicional en el HTML, que también es más limpio que agregar un elemento extra. – thirtydot

que no deberían tener los <div class="cl"></div> divs en absoluto. Simplemente ponga el clear: both en el bloque div.

Ejemplo: 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>

Editar: se ha añadido código

Fuente

2011-09-07 15:17:41 Michael

Este fue mi pensamiento inicial también. Sin embargo, no probado – diggersworld

Cómo borrar: ambos; ¿correctamente?

Respuesta

Cuestiones relacionadas