¿Cómo funciona realmente la limpieza CSS?

Question

Tengo un <div> que quiero estar en una línea por sí mismo. De acuerdo con W3Schools , esta regla:

div.foo {
  clear: both;
}

... debería significar esto:

  

" No se permiten elementos flotantes ni en el lado izquierdo ni en el derecho. "

Sin embargo, si floto dos "clear: left" elementos restantes y aplico la regla anterior al primero, el segundo no se mueve.

Por otro lado, si aplico clear a la segunda <=>, se mueve hacia abajo a la siguiente línea. Este es mi enfoque normal, pero no entiendo por qué tengo que hacerlo así.

¿La descripción anterior de W3Schools está mal indicada o me falta algo? ¿Una regla de limpieza solo puede mover el elemento al que se aplica?

Respuesta

Gracias Michael S y John D por las buenas explicaciones. Warren señaló a la especificación CSS2 , y ahí es donde encontré esta respuesta (énfasis mío) :

  

Esta propiedad indica qué lados de las cajas de un elemento pueden no estar adyacentes a una caja flotante anterior .

Entonces: <=> solo afecta la posición del elemento al que se aplica, en relación con los elementos que aparecen antes que el código.

Decepcionante que no puedo decirle a mi <=> que haga que otros divs se muevan hacia abajo, pero son los descansos. :)

Answer 1

Cuando aplicas clear a un elemento, moverá ESE elemento para que no tenga elementos a la izquierda o a la derecha. No reubica ninguno de los otros elementos, simplemente mueve el elemento a una posición donde no hay nada a su alrededor.

Editar

Los elementos sobre el elemento borrado no se mueven, los elementos debajo del elemento PODRÍAN moverse. También tenga en cuenta el comentario adicional en los comentarios

Answer 2

Su CSS está analizando " correctamente. " Su segundo div todavía está flotando a la izquierda, por lo que incluso después de borrar el primero, si hay espacio a lo ancho para el segundo, quedará flotando a la izquierda en el punto más alto que pueda.

Answer 3

Sí, la limpieza solo mueve el elemento al que se aplica. Sin embargo, el resultado se siente diferente dependiendo de si el elemento está & Quot; en flujo & Quot; o fuera de flujo. Supongo que eso te está confundiendo.

Si el elemento está en flujo, la limpieza lo mueve hacia abajo junto con todo lo que sigue. Piense en ello como moviendo la posición actual del lápiz (el lugar donde se debe colocar el siguiente elemento) hacia abajo. Este comportamiento es fácil de entender.

Si el elemento está fuera de flujo, como el flotador en su ejemplo, solo se mueve el elemento, la posición del lápiz permanece en el mismo lugar, a menos que otras reglas los hagan moverse. Por ejemplo, no se permite que un flotador comience por encima de un flotador anterior.

También hay un problema complicado de colapso de margen. La limpieza los interrumpe, a veces de manera poco intuitiva.

Answer 4

Usted aplica clear al elemento que desea en una nueva línea. El claro que usa depende de los elementos que no desea que toque. Si desea que la Imagen B esté en una nueva línea y no toque la Imagen A (lo que permite decir que es flotante: izquierda), colocaría la Imagen B como {clear: left} no está bien a la derecha, como naturalmente pensaría. Estás limpiando el flotador del elemento anterior.

Answer 5

Generalmente hago lo siguiente para ese efecto:

float: left;
clear: right;

No sé si se aplica simplemente al elemento al que se aplica, aunque tiene sentido.

Sin embargo, las especificaciones están disponibles aquí: http://www.w3.org/ TR / REC-CSS2 /