Welke methoden voor het blokkeren van stroming…

overflow: hidden; of overflow: auto;: Wordt toegepast op de ouder van een element(en) met float. Creëert een nieuwe blokformatieruimte (BFC), waardoor de ouder de omliggende elementen in zijn hoogte opneemt.

Situatie: De eenvoudigste manier om inhoud die buiten de grenzen van het element uitsteekt te verbergen of scrollen toe te passen, maar het werkt ook als een reinigingsmethode.

clear: both;: Wordt toegepast op een element dat niet de vorige elementen met float mag omringen. Dit element wordt onder alle omliggende elementen geplaatst.

Situatie: Wanneer je een nieuwe regel of sectie wilt maken na elementen die elkaar omringen.

Methode clearfix (pseudo-elementen ::after): Voegt een pseudo-element toe aan de oudercontainer met specifieke eigenschappen, die het gedrag van clear: both; imiteert, maar zonder extra HTML-elementen toe te voegen.

.clearfix::after {
    content: ""; /* Verplichte inhoud om het pseudo-element weer te geven */
    display: table; /* Creëert een nieuwe blokformatieruimte, zoals overflow: hidden; */
    clear: both; /* Past de reiniging toe */
}

Situatie: De meest gebruikte en aanbevolen manier van reinigen, die schoon is en de markup-structuur niet verstoort. Wordt toegepast op de ouder die omliggende elementen bevat.

Gebruik van display: flex of display: grid: Moderne lay-outmethoden die geen omlijning vereisen om elementen te positioneren, waardoor de noodzaak voor reinigen wegvalt. Situatie: Bij het bouwen van complexe lay-outs of wanneer meer flexibele controle over de positionering van elementen nodig is.
Toevoegen van een extra element met clear: both; (oude methode): Voegt een lege HTML-element toe na de omliggende elementen en past clear: both; toe. Situatie: Wordt als een verouderde en ongewenste aanpak beschouwd, omdat het overbodige HTML toevoegt.

Welke methoden voor het blokkeren van stroming (clearing) kent u en in welke situaties worden ze toegepast?