de clearfix hack

Hier is een raar, slecht ding dat soms kan gebeuren als floats worden gebruikt:

img {
  float: right;
}

<div>

Ow ow... deze afbeelding is groter dan het containing element en het is ge-float, dus het breekt uit de flow van de container!

Boe. Er is een manier om dit te fixen, maar het is een lelijke. Ook wel genaamd de clearfix hack.

Laten we eens proberen om deze nieuwe CSS toe te voegen:

.clearfix {
  overflow: auto;
}

Eens kijken wat er nu gebeurt:

<div class="clearfix">

Veel beter!

Dit werkt in moderne browsers. Als je ook support voor IE6 nodig hebt, zul je het volgende nodig hebben:

.clearfix {
  overflow: auto;
  zoom: 1;
}

Er zijn exotische browsers die iets meer aandacht nodig hebben. De wereld van clearfixing is nogal schrikaanjagend, maar deze eenvoudige oplossing werkt in de meeste browsers van deze tijd.