Welke clearing-methoden ken je en in welke situaties worden ze toegepast?

Methoden om het vloeien te voorkomen:

• clear: left; — voorkomt vloeien aan de linkerkant. Wordt toegepast wanneer het element niet naast de vloeiende elementen links ervan mag staan.
• clear: right; — voorkomt vloeien aan de rechterkant. Wordt toegepast wanneer het element niet naast de vloeiende elementen rechts ervan mag staan.
• clear: both; — voorkomt vloeien aan beide zijden. Wordt toegepast wanneer het element niet naast enige vloeiende elementen mag staan. Dit is de meest gebruikte optie.
• clear: none; (standaardwaarde) — staat vloeien toe.

Toepassingen:

• Om het "inzakken" van de oudercontainer te voorkomen: Als alle kindelementen van de ouder floaten (hebben float), verliest de oudercontainer zijn hoogte en zakt in. Het toevoegen van een element met clear: both; na de floatende elementen binnen de ouder of het gebruik van het pseudo-element ::after met clear: both; lost dit probleem op.
• Voor de juiste positionering van elementen na floatende: Als normale (niet floatende) elementen onder de floatende moeten worden geplaatst en niet ernaast.
• Voor het maken van "rijen" of "regels" in float-layouts: Wanneer floatende elementen in meerdere rijen moeten worden gerangschikt, wordt clear gebruikt om een nieuwe rij te beginnen.

Voorbeeld van gebruik van het pseudo-element ::after voor het reinigen:

.clearfix::after {
  content: ""; /* Belangrijk voor het weergeven van het pseudo-element */
  display: table; /* Of block */
  clear: both; /* Belangrijkste eigenschap voor het reinigen */
}

Deze clearfix-klasse wordt vervolgens toegepast op het ouder-element dat de floatende kindelementen bevat.