Si un div tiene "clear: right", nada debería flotar a la derecha, ¿o sí?

Question

Parece que me he confundido en cuanto a lo que significa la palabra clave "clear" de css.

Tengo una serie de elementos div, todos con "float: left". El segundo elemento div más reciente también tiene "claro: derecho". Pensé que eso causaría que el siguiente elemento pasara a la siguiente línea. Pero para mí, no es así.

Aquí está mi ejemplo:

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="Number">0</div> 
    <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
    <div class="Duration">00:00:32</div> 
</div>​ 

se ve así:

que estoy tratando de hacer que la duración ("00:00:32"), aparece en la línea siguiente , a la derecha de la miniatura (el rectángulo azul).

Sé que podría poner los últimos tres div en otro contenedor div, pero el propósito de esta pregunta es entender por qué "clear: right" no detiene la duración de la flotación a la derecha del título.

Aquí está el CSS:

div.Section 
{ 
    overflow:auto; 
    background:cornsilk; 
    border:2px solid navy; 
    padding:12px; 
} 

div.Section div.Thumbnail 
{ 
    width:64px; 
    height:42px; 
    background:SteelBlue; 
    foreground:Navy; 
} 

div.Number 
{ 
    width:16px; 
    margin-left:6px; 
} 

div.Duration 
{ 
    margin-left:22px; 
} 

div.Section div 
{ 
    float:left; 
} 

div.Section div.Title 
{ 
    color:DarkGreen; 
    clear:right; 
} 

Y, por supuesto, el enlace jsFiddle: http://jsfiddle.net/8J7V6/3/

Answer 1

La propiedad clear no impide que los elementos que se coloquen en ese espacio después del elemento despejado. Impide que el elemento se coloque donde ya hay elementos flotando en esa dirección antes que él. Agregar un clear:left a div.Duration lo haría colocar debajo de la caja azul marino. Agregar un <br/> antes de la duración podría resolver su problema, o, como ya dijo en su pregunta, podría usar otro contenedor div para los últimos tres divs.

Answer 2

he utilizado relleno y el margen. Si no es posible utilizarlo en su caso, la siguiente solución no será apropiada.

http://jsfiddle.net/8J7V6/5/

Answer 3

No hay nada flotante a la derecha de la misma. El problema al que se enfrenta es que ya envió todo su contenido antes de la hora, y luego le está diciendo a la hora de flotar a la izquierda. Sigue flotando hacia la izquierda, solo está apilando encima del contenido que ya está a la izquierda.

Pero sí, despejar a la derecha hace que ese elemento se rompa más allá de todos los elementos que flotan hacia la derecha. Borrar no afecta los elementos después de esto.

¿Has probado using a simple <br /> after your title?

Answer 4

.Duration { clear: left; } debería funcionar

Answer 5

La respuesta de ahruss es la correcta, pero también noté que nadie realmente respondió su pregunta. Básicamente, clear:left se refiere a los elementos flotantes de la izquierda. clear:right se refiere a elementos flotantes derechos.

Como su elemento flota a la izquierda, no a la derecha, clear:right no lo afectará.

La otra cosa que podría hacer es envolver los dos elementos de texto en un div separado del cuadro azul, flotar ese div del contenedor y el div azul, luego cuando flote los dos elementos de texto, su código clear:left pondrá el fecha debajo del texto todavía dentro de su contenedor div y no debajo de la imagen azul a la izquierda.

De esta manera:

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="TextContainer"> 
     <div class="Number">0</div> 
     <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
     <div class="Duration">00:00:32</div> 
    </div> 
</div> 

y añadir esto a tu CSS:

div.TextContainer { 
    float:left; 
} 

Añadir en cualesquiera otros estilos visuales que necesita.