Come funzionano gli elementi flottanti (floats) in CSS?

float rimuove un elemento dal flusso normale del documento, consentendo ad altri elementi (di solito di testo o inline) di avvolgerlo dal lato specificato dalla proprietà (left, right).

Principi di base:

• Rimozione dal flusso: Un elemento con float non occupa spazio nel flusso normale del documento.
• Avvolgimento: Gli elementi di blocco adiacenti non occuperanno lo spazio dell'elemento con float, e il loro contenuto (elementi inline) lo avvolgerà dal lato specificato.
• Influenza sul genitore: L'altezza del contenitore genitore, che contiene solo elementi flottanti, può collassare, ignorando la loro altezza.
• clear: La proprietà clear (left, right, both) viene usata per impedire l'avvolgimento da parte di elementi posizionati dopo l'elemento flottante.

Esempio:

.image {
  float: left; /* L'immagine si sposta a sinistra */
  margin-right: 10px; /* Aggiungi margine a destra per il testo */
}

.text {
  /* Il testo avvolgerà l'immagine */
}

Raccomandazioni:

• L'uso di float è in disuso per creare layout complessi ed è stato sostituito da Flexbox o Grid.
• float può ancora essere utile per creare effetti di avvolgimento di immagini con testo.
• Per evitare che il contenitore genitore collassi quando si usa float, si usano tecniche come "clearfix" o overflow: hidden/auto sul genitore.