Clear fix

Vanligtvis försöker alla blockelement att sätta en höjd som täcker in allt innehåll som finns i dem (om vi inte sätter height explicit vill säga). När vi använder float lyfts dock de flytande elementen ur det normala layoutflödet och därför kommer de inte att räknas som en del av innehållet i föräldraelemetet. Detta kan orsaka en hel del problem.

En enkel lösning kan vara att även sätta float på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen clearfix till de blockelement som kräver en fix så bör allt fungera bra.

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

Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter.