Hur man rengör flytande (Clearfix)

Lär dig hur man använder clearfix-tekniken för att rengöra flytande.

clearfix-teknik

Om en element är högre än sitt innehållselement och det är flytande, kommer det att överflöda sin behållare.

Då kan vi lägga till overflow: auto; till innehållselementet för att lösa detta problem:

Exempel

.clearfix {
  overflow: auto;
}

Prova själv

Så länge du kan kontrollera marginaler och inre marginaler,overflow:auto Effekten av att rengöra flytande är bra (annars kanske du ser en rullgardin).

Men nya, moderna clearfix-tekniker är säkrare att använda, och de flesta webbsidor använder följande kod:

Exempel

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

Prova själv

Relaterade sidor

Tutorials:CSS flytande