Cosa sono gli elementi flottanti (floats) in CSS?

Float in CSS è una proprietà che permette a un elemento di "galleggiare" a sinistra o a destra del contenuto che lo circonda.

Caratteristiche principali:

• Spostamento: L'elemento con la proprietà float applicata si sposta verso il bordo sinistro o destro del suo contenitore padre (o di un altro elemento flottante).
• Avvolgimento: Il contenuto normale di blocco o in linea (testo, immagini) avvolge l'elemento flottante.
• Contesto di flusso: Gli elementi flottanti vengono parzialmente rimossi dal normale flusso del documento, ma influenzano la posizione di altri elementi.
• Applicazione: Inizialmente usato per organizzare colonne o posizionare immagini con testo intorno. Nella progettazione moderna si usano più comunemente Flexbox o Grid.

Valori tipici della proprietà float:

• left: L'elemento galleggia a sinistra.
• right: L'elemento galleggia a destra.
• none: L'elemento non galleggia (valore predefinito).
• inherit: Eredita il valore dal genitore.
• initial: Imposta il valore predefinito.

Problemi con float:

• Collasso del contenitore padre: Il contenitore che contiene solo elementi flottanti può collassare in altezza.
• Pulizia: Per evitare che gli elementi successivi avvolgano gli elementi flottanti, si usa la proprietà clear.

.image-float {
  float: left; /* L'immagine galleggerà a sinistra */
  margin-right: 10px; /* Margine a destra dell'immagine */
}

.text-content {
  /* Questo testo avvolgerà l'immagine */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Pulizia del flusso dopo gli elementi flottanti */
}