How TO - Vlotters wissen (Clearfix)
Leer hoe u floats verwijdert met de "clearfix" hack.
Vlotten wissen (Clearfix)
Elementen na een drijvend element zullen er omheen stromen. Gebruik de "clearfix"-hack om het probleem op te lossen:
Zonder Clearfix
Met Clearfix
De clearfix-hack
Als een element groter is dan het element dat het bevat en het drijft, zal het buiten de container overlopen.
Dan kunnen we toevoegen overflow: auto;
aan het bevattende element om dit probleem op te lossen:
Voorbeeld
.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.