Come fare per - Cancellare i galleggianti (Clearfix)
Scopri come cancellare i float con l'hack "clearfix".
Come cancellare i float (Clearfix)
Gli elementi dopo un elemento fluttuante scorreranno attorno ad esso. Usa l'hack "clearfix" per risolvere il problema:
Senza Clearfix
Con Clearfix
Il clearfix Hack
Se un elemento è più alto dell'elemento che lo contiene ed è mobile, traboccherà fuori dal suo contenitore.
Quindi possiamo aggiungere overflow: auto;
all'elemento contenitore per risolvere questo problema:
Esempio
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.