strong - ¿Cómo funciona el borrado de CSS realmente?

p html

Question

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

div.foo {
  clear: both;
}

... debería significar esto:

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

Sin embargo, si hago flotar dos elementos <div> restantes y aplico la regla anterior a la primera, la segunda no se mueve.

Por otro lado, si aplico "clear: left" al segundo <div> , pasa a la siguiente línea. Este es mi enfoque habitual, pero no entiendo por qué tengo que hacerlo así.

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

Responder

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

Esta propiedad indica qué lados de la (s) caja (s) de un elemento pueden no estar adyacentes a una caja flotante anterior .

Por lo tanto, clear solo afecta la posición del elemento al que se aplica, en relación con los elementos que aparecen antes del código.

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

Answer 1

Generalmente hago lo siguiente para ese efecto:

float: left;
clear: right;

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

Las especificaciones están disponibles aquí: http://www.w3.org/TR/REC-CSS2/

Answer 2

Su CSS está analizando "correctamente". Su segundo div aún flota a la izquierda, por lo que incluso después de limpiar el primero, si hay espacio a lo ancho para el segundo, se ajustará flotado a la izquierda en el punto más alto que pueda.

Answer 3

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

Si el elemento está en flujo, el movimiento lo mueve hacia abajo junto con todo lo que sigue. Piénselo como mover la posición actual del lápiz (el lugar donde debería colocarse 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 lo hagan moverse. Por ejemplo, un flotador no puede comenzar por encima de un flotador anterior.

También hay un problema complicado de colapso de margen. El borrado los interrumpe, a veces de una manera poco intuitiva.

Answer 4

Aplica claro al elemento que deseas en una nueva línea. La claridad que usa depende de los elementos que no quiere que toque. Si quiere que la Imagen B esté en una nueva línea y no toque la Imagen A (que digamos que es flotante: izquierda), pondría la Imagen B como {clara: izquierda} no clara como usted pensaría naturalmente. Está borrando el flotante del elemento anterior.

Answer 5

Cuando aplique clear a un elemento, moverá ESE elemento para que no tenga elementos a la derecha o a la izquierda de este. 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 que se encuentran sobre el elemento borrado no se mueven, los elementos debajo del elemento PODRÍAN ser movidos. También tenga en cuenta el comentario adicional en los comentarios