Come rimuovere il float (Clearfix)

Impara come utilizzare la tecnica clearfix per rimuovere il float.

Tecnica clearfix

Se un elemento è più alto dell'elemento contenitore e è flottante, allora esce dal suo contenitore.

Poi, possiamo aggiungere overflow: auto; all'elemento contenitore per risolvere questo problema:

Esempio

.clearfix {
  overflow: auto;
}

Prova tu stesso

Finché puoi controllare i margini esterni e interni,overflow: auto; l'effetto di rimozione del float è molto buono (altrimenti, potresti vedere la barra di scorrimento).

Tuttavia, la nuova e moderna tecnica di clearfix è più sicura da utilizzare, la maggior parte dei siti web utilizza il seguente codice:

Esempio

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Prova tu stesso

Pagine correlate

Tutorial:Flottamento CSS