Welke methoden voor het verbieden van stroming (clearing) ken je en waar worden ze toegepast?

• clear: both;: De meest gebruikelijke en betrouwbare methode. Wordt toegepast op een element dat onder alle vorige zwevende elementen moet worden geplaatst. Dit kan een aparte lege element zijn of een van de lay-out elementen.
• Toevoegen van een leeg element met clear: both;: Soms wordt gebruikt om de stroom gegarandeerd te resetten, vooral bij werken met complexe lay-outs. Dit is een lege div of een ander blokelement.
• Pseudo-element :after met clear: both;: Een modernere aanpak. Wordt toegepast op de container van zwevende elementen. Creëert een "virtueel" element na de laatste inhoud van de container, waardoor de interne stroom wordt gereset.

/* Voorbeeld van gebruik van pseudo-element :after */
.container::after {
  content: ""; /* Verplichte eigenschap voor pseudo-elementen */
  display: table; /* Vaak gebruikt voor betere compatibiliteit */
  clear: both;
}

• overflow: hidden; of overflow: auto;: Wordt toegepast op de container van zwevende elementen. Creëert een nieuwe blokformatiecontext die de interne stroom "schoont". Dit kan echter inhoud afsnijden of scrollbalken creëren als de inhoud de grenzen van de container overschrijdt.
• Blokformatiecontext (BFC): Alle bovenstaande methoden, behalve de expliciete lege element, creëren op de een of andere manier een nieuwe BFC, wat leidt tot het resetten van de stroom. Eigenschappen die BFC creëren:
  • float (niet-nul waarde)
  • overflow (waarde anders dan visible)
  • display: inline-block
  • position: absolute of fixed
  • display: flow-root; (relatief nieuw, creëert expliciet een BFC)

Vergelijkingstabel van methoden:

Methode	Toepassing op	Reset methode	Potentiële problemen
clear: both;	Element	Expliciete reset	Extra element
Leeg element + clear	Leeg element	Expliciete reset	Extra element
:after + clear	Container	Pseudo-element	Moeilijker te begrijpen voor beginners
overflow: hidden/auto;	Container	Creëert BFC	Afknippen / scrollbalken
BFC creëren met een andere eigenschap	Container	Creëert BFC	Onbedoeld, bijwerkingen
display: flow-root;	Container	Expliciete BFC	Beperkte ondersteuning in oude browsers

Waar toegepast:

• Zorgen dat een element na zwevende elementen onderaan wordt weergegeven.
• Zorgen dat een container met alleen zwevende elementen niet in hoogte krimpt.
• In complexe lay-outs om de stroom van het document rond zwevende elementen te controleren.