¿Cómo funcionan los elementos flotantes (floats) en CSS?

float elimina un elemento del flujo normal del documento, permitiendo que otros elementos (generalmente de texto o en línea) lo rodeen desde el lado especificado en la propiedad (left, right).

Principios básicos:

• Eliminación del flujo: Un elemento con float no ocupa espacio en el flujo normal del documento.
• Ajuste de texto: Los elementos de bloque adyacentes no ocuparán el espacio del elemento con float, y su contenido (elementos en línea) lo rodeará desde el lado especificado.
• Influencia en el padre: La altura del contenedor padre, que solo contiene elementos flotantes, puede colapsar, ignorando su altura.
• clear: La propiedad clear (left, right, both) se usa para evitar que los elementos que vienen después del elemento flotante lo rodeen.

Ejemplo:

.image {
  float: left; /* La imagen se desplaza a la izquierda */
  margin-right: 10px; /* Añadimos margen a la derecha para el texto */
}

.text {
  /* El texto rodeará la imagen */
}

Recomendaciones:

• El uso de float está en desuso para crear diseños complejos y ha sido reemplazado por Flexbox o Grid.
• float aún puede ser útil para crear efectos de ajuste de imágenes con texto.
• Para evitar que el contenedor padre colapse al usar float, se emplean técnicas como "clearfix" o overflow: hidden/auto en el padre.