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

Float en CSS es una propiedad que permite que un elemento "flote" a la izquierda o a la derecha del contenido que lo rodea.

Características principales:

• Desplazamiento: El elemento con la propiedad float aplicada se desplaza hacia el borde izquierdo o derecho de su contenedor padre (o de otro elemento flotante).
• Afluencia: El contenido de bloque o en línea normal (texto, imágenes) rodea al elemento flotante.
• Contexto de flujo: Los elementos flotantes se sacan parcialmente del flujo normal del documento, pero afectan la posición de otros elementos.
• Aplicación: Inicialmente se usaba para organizar columnas o colocar imágenes con texto a su alrededor. En el diseño moderno, se utilizan más comúnmente Flexbox o Grid.

Valores típicos de la propiedad float:

• left: El elemento flota a la izquierda.
• right: El elemento flota a la derecha.
• none: El elemento no flota (valor predeterminado).
• inherit: Hereda el valor del elemento padre.
• initial: Establece el valor por defecto.

Problemas con float:

• Colapso del contenedor padre: El contenedor que solo contiene elementos flotantes puede colapsar en altura.
• Limpieza: Para evitar que otros elementos rodeen a los flotantes, se debe usar la propiedad clear.

.image-float {
  float: left; /* La imagen flotará a la izquierda */
  margin-right: 10px; /* Margen a la derecha de la imagen */
}

.text-content {
  /* Este texto rodeará a la imagen */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Limpieza del flujo después de los elementos flotantes */
}