¿Qué son los elementos flotantes (floats) en CSS?

Los flotantes en CSS son una propiedad de posicionamiento que desplaza un elemento hacia uno de los lados de su contenedor (left o right), permitiendo que el texto y los elementos en línea lo rodeen. El elemento se elimina del flujo normal del documento, pero sigue formando parte del diseño. Inicialmente se usaban para crear diseños de múltiples columnas y envolver imágenes con texto, pero ahora se emplean principalmente para resolver tareas específicas debido a métodos más flexibles y predecibles, como Flexbox y Grid.

Valores principales de la propiedad float:

• none: El elemento se muestra en el flujo normal (valor predeterminado).
• left: El elemento se desplaza hacia el borde izquierdo del contenedor.
• right: El elemento se desplaza hacia el borde derecho del contenedor.
• inherit: Hereda el valor del elemento padre.

Ejemplo de uso:

.image {
  float: left;
  margin-right: 15px; /* Espaciado a la derecha del texto que lo rodea */
}

.text {
  /* El texto rodeará al elemento con la clase .image */
}

Problemas con los floats:

• Colapso del flujo (colapsamiento del elemento circundante): Un elemento padre que contiene solo elementos flotantes puede colapsar en altura, ya que estos elementos no se consideran en sus dimensiones normales.
• Superposición de elementos: Los elementos adyacentes pueden superponer al elemento flotante si no se consideran sus tamaños.

Solución a los problemas:

• Propiedad clear: Se establece en un elemento que no debe rodear al elemento flotante. Valores: left, right, both, none.
• Técnica clearfix: Añadir una clase especial al elemento padre o usar el pseudo-elemento :after para forzar el colapso del padre.

.container::after {
  content: "";
  display: table; /* O block */
  clear: both;
}

• Métodos modernos: Uso de Flexbox o CSS Grid para crear diseños complejos.

Aunque los floats no son la herramienta principal para el maquetado en la web moderna, entender cómo funcionan es importante para mantener código antiguo y resolver tareas específicas, como envolver imágenes con texto.