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

Los elementos flotantes (float) en CSS son una propiedad que permite mover un elemento fuera del flujo normal del documento y colocarlo a la izquierda o derecha de su contenedor. Los elementos adyacentes y el texto rodearán a este elemento flotante.

Valores principales de la propiedad float:

• left: El elemento flota a la izquierda.
• right: El elemento flota a la derecha.
• none: El elemento permanece en el flujo normal (valor predeterminado).
• inherit: Hereda el valor del elemento padre.

Ejemplos de uso:

.float-left {
  float: left; /* El elemento flotará a la izquierda */
  margin-right: 10px; /* Añade margen a la derecha para el texto */
}

.float-right {
  float: right; /* El elemento flotará a la derecha */
  margin-left: 10px; /* Añade margen a la izquierda para el texto */
}

Características del comportamiento:

• El elemento flotante se elimina del flujo estándar del documento, pero afecta la disposición de los elementos y el texto adyacentes.
• El elemento padre del elemento flotante puede 'colapsar', ya que los hijos flotantes no afectan su altura en el flujo normal. Para evitar esto, se utilizan técnicas como clear o otras, por ejemplo, overflow: hidden o Flexbox/Grid.
• La propiedad clear permite especificar de qué lado no deben estar los elementos flotantes:

  .clear-left {
    clear: left; /* El elemento se colocará debajo de cualquier elemento flotante a la izquierda */
  }
  
  .clear-right {
    clear: right; /* El elemento se colocará debajo de cualquier elemento flotante a la derecha */
  }
  
  .clear-both {
    clear: both; /* El elemento se colocará debajo de cualquier elemento flotante */
  }
  

Históricamente, los elementos flotantes se usaban para crear diseños de múltiples columnas, pero ahora es preferible usar Flexbox o CSS Grid por su mayor flexibilidad y previsibilidad. Sin embargo, float sigue siendo útil para envolver texto alrededor de imágenes u otros elementos.