Quali metodi di blocco del flusso (clearing) conosci e in quali situazioni vengono applicati?

• overflow: hidden; o overflow: auto;: Si applica all'elemento genitore di un elemento(i) con float. Crea un nuovo contesto di formattazione del blocco (BFC), facendo sì che il genitore includa gli elementi circostanti nella sua altezza.

Situazione: Il modo più semplice quando si deve nascondere il contenuto che esce dai limiti dell'elemento o applicare lo scorrimento, ma funziona anche come metodo di pulizia.

• clear: both;: Si applica a un elemento che non deve circondare gli elementi precedenti con float. Questo elemento sarà posizionato sotto tutti gli elementi circostanti.

Situazione: Quando si deve creare una nuova riga o sezione dopo elementi che si circondano a vicenda.

• Metodo clearfix (pseudo-elementi ::after): Aggiunge un pseudo-elemento al contenitore genitore con proprietà specifiche, imitando il comportamento di clear: both;, ma senza la necessità di aggiungere elementi HTML extra.

.clearfix::after {
    content: ""; /* Contenuto obbligatorio per mostrare il pseudo-elemento */
    display: table; /* Crea un nuovo contesto di blocco, come overflow: hidden; */
    clear: both; /* Applica la pulizia */
}

Situazione: Il metodo più comune e raccomandato di pulizia, che è pulito e non interrompe la struttura del markup. Si applica all'elemento genitore che contiene gli elementi circostanti.

• Uso di display: flex o display: grid: Metodi moderni di layout che non richiedono il circondare per posizionare gli elementi, eliminando così la necessità di pulizia. Situazione: Quando si costruiscono layout complessi o quando si necessita di un controllo più flessibile sulla disposizione degli elementi.

• Aggiunta di un elemento extra con clear: both; (metodo vecchio): Inserisce un elemento HTML vuoto dopo gli elementi circostanti e gli applica clear: both;. Situazione: È considerato un metodo obsoleto e indesiderato, poiché aggiunge HTML ridondante.