En el diseño web clásico, las propiedades float y clear de CSS son fundamentales para controlar el flujo de los elementos de la página, especialmente para crear diseños de múltiples columnas antes de que las propiedades de diseño más modernas como Flexbox y Grid se hicieran populares.
Cuando un elemento flota, es removido del flujo normal del documento (aunque sigue perteneciendo a él). Se cambia hacia la izquierda, o hacia la derecha, hasta que toca el límite de su caja contenedora, u otro elemento flotante.
La propiedad float puede tener uno de los siguientes valores:
left: El elemento se mueve a la izquierda del contenedor, y el texto y los elementos en línea fluyen a su derecha.
right: El elemento se mueve a la derecha del contenedor, y el texto y los elementos en línea fluyen a su izquierda.
none: Valor por defecto, donde el elemento no flota y se muestra donde aparecería en el flujo normal del documento.
Uno de los problemas al usar float es que puede sacar los elementos del flujo normal de la página, lo que significa que el elemento contenedor no se expande para ajustarse a los elementos flotantes dentro de él. Esto puede resultar en un contenedor que parece no tener altura, lo que afecta a la disposición del diseño.
La propiedad clear puede tener uno de los siguientes valores:
none: El elemento permite flotantes en ambos lados.
left: El elemento se mueve hacia abajo para despejar flotantes del lado izquierdo.
right: El elemento se mueve hacia abajo para despejar flotantes del lado derecho.
both: El elemento se mueve hacia abajo para despejar flotantes de ambos lados.