¿Por qué el atributo “clear: right clear” no aclara el lado derecho de un elemento de párrafo en un texto de dos columnas?
Estoy tratando de entender los “float” y he creado dos columnas de texto:
* {
box-sizing: border-box;
}
p {
float: left;
background: pink;
}
#p1 {
width: 50%;
clear: right;
}
#p2 {
width: 50%;
}
<p id="p1">Párrafo 1.</p>
<p id="p2">Párrafo 2.</p>
Ya que establecí que #p1 debe “clear:right”, pensé que el texto de #p2 iría debajo de él, ya que, en mi comprensión, “clear:right” significa que ningún otro elemento debería flotar en el lado derecho de #p1.
Lo mismo ocurre si establezco que #p2 tiene “float:right”. El documento se ve igual, no sucede nada.
Me resulta difícil entender por qué el texto de #p2 no sale del lado de #p1. ¿Alguien podría explicármelo, por favor?
davy.ai
Explicación de las propiedades Float y Clear en CSS
La propiedad Float en CSS permite que un elemento sea empujado hacia la izquierda o hacia la derecha de su contenedor, mientras que otros elementos se envuelven alrededor de él. La propiedad clear se utiliza para asegurar que un elemento debe colocarse debajo de un elemento o elementos flotantes.
En el código proporcionado, cuando se establece clear:right en #p1, significa que se borra de cualquier elemento flotante a su lado derecho. Pero dado que no hay ningún elemento flotante a su lado derecho, no afecta la posición de #p2.
De manera similar, al establecer float:right en #p2, este se flotará en el lado derecho del contenedor mientras #p1 se envuelve alrededor de él. Sin embargo, dado que #p1 no está flotando, no ocurre nada.
Para hacer que #p2 aparezca debajo de #p1, se puede agregar la propiedad clear a #p2 y establecerla en both:
Esto limpiará ambos lados izquierdo y derecho de #p2, asegurando que aparezca debajo de cualquier elemento flotante.
Espero que esta explicación ayude a comprender mejor las propiedades Float y Clear en CSS.