Quali metodi di divieto di flusso (clearing) conosci e dove vengono applicati?

• clear: both;: Il metodo più comune e affidabile. Si applica a un elemento che deve essere posizionato sotto tutti gli elementi flottanti precedenti. Può essere un elemento vuoto separato o uno degli elementi del layout.
• Aggiunta di un elemento vuoto con clear: both;: A volte usato per garantire la cancellazione del flusso, specialmente quando si lavora con layout complessi. È un div vuoto o un altro elemento di blocco.
• Pseudo-elemento :after con clear: both;: Approccio più moderno. Si applica al contenitore di elementi flottanti. Crea un "elemento virtuale" dopo l'ultimo contenuto del contenitore, cancellando così il flusso interno.

/* Esempio di utilizzo del pseudo-elemento :after */
.container::after {
  content: ""; /* Proprietà obbligatoria per i pseudo-elementi */
  display: table; /* Spesso usato per una migliore compatibilità */
  clear: both;
}

• overflow: hidden; o overflow: auto;: Si applica al contenitore di elementi flottanti. Crea un nuovo contesto di formattazione del blocco che "pulisce" il flusso interno. Tuttavia, questo può tagliare il contenuto o creare barre di scorrimento se il contenuto supera i limiti del contenitore.
• Contesto di formattazione del blocco (BFC): Tutti i metodi sopra, tranne l'elemento vuoto esplicito, creano in qualche modo un nuovo BFC, portando alla cancellazione del flusso. Proprietà che creano BFC:
  • float (valore diverso da zero)
  • overflow (valore diverso da visible)
  • display: inline-block
  • position: absolute o fixed
  • display: flow-root; (più recente, crea esplicitamente un BFC)

Tabella comparativa dei metodi:

Metodo	Applicazione a	Metodo di cancellazione	Problemi potenziali
clear: both;	Elemento	Cancellazione esplicita	Elemento aggiuntivo
Elemento vuoto + clear	Elemento vuoto	Cancellazione esplicita	Elemento aggiuntivo
:after + clear	Contenitore	Pseudo-elemento	Più difficile da capire per i principianti
overflow: hidden/auto;	Contenitore	Creazione di BFC	Taglio / barre di scorrimento
Creare BFC con un’altra proprietà	Contenitore	Creazione di BFC	Non intenzionale, effetti collaterali
display: flow-root;	Contenitore	Creazione esplicita di BFC	Supporto limitato nei browser vecchi

Dove si applicano:

• Per far sì che un elemento dopo gli elementi flottanti inizi a essere visualizzato sotto di essi.
• Per evitare che un contenitore contenente solo elementi flottanti collassi in altezza.
• In layout complessi per controllare il flusso del documento intorno agli elementi flottanti.