Hoe float verwijderen (Clearfix)

Leer hoe je de clearfix techniek kunt gebruiken om float te verwijderen.

clearfix techniek

Als een element hoger is dan het element dat het bevat en het is gefloat, zal het buiten de container vallen.

Vervolgens kunnen we overflow: auto; toevoegen aan het bevatte element om dit probleem op te lossen:

Voorbeeld

.clearfix {
  overflow: auto;
}

Probeer het zelf

Zolang je de marges en inkepingen kunt controleren:overflow: auto; Het verwijderen van de float effecten is goed (anders zou je mogelijk een scrollbar zien).

Echter, de nieuwe, moderne clearfix techniek is veiliger in gebruik en de meeste webpagina's gebruiken de volgende code:

Voorbeeld

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

Probeer het zelf

Gerelateerde pagina's

Handleiding:CSS Drijven