Ce metode de interzicere a fluxului (clearing) cunoști și unde sunt aplicate?

• clear: both;: Cel mai comun și fiabil metodă. Se aplică unui element care trebuie să fie plasat sub toate elementele flotante anterioare. Poate fi un element gol separat sau unul dintre elementele de layout.
• Adăugarea unui element gol cu clear: both;: Uneori folosit pentru a asigura resetarea fluxului, mai ales când se lucrează cu layout-uri complexe. Este un div gol sau alt element de bloc.
• Pseudo-elementul :after cu clear: both;: Abordare mai modernă. Se aplică containerului de elemente flotante. Creează un element "virtual" după conținutul final al containerului, resetând astfel fluxul intern.

/* Exemplu de utilizare a pseudo-elementului :after */
.container::after {
  content: ""; /* Proprietate obligatorie pentru pseudo-elemente */
  display: table; /* Folosit adesea pentru o compatibilitate mai bună */
  clear: both;
}

• overflow: hidden; sau overflow: auto;: Se aplică containerului de elemente flotante. Creează un nou context de formatare a blocului care "curăță" fluxul intern. Totuși, acest lucru poate tăia conținutul sau poate crea bare de derulare dacă conținutul depășește limitele containerului.
• Contextul de formatare a blocului (BFC): Toate metodele de mai sus, cu excepția elementului gol explicit, creează într-un fel sau altul un nou BFC, ceea ce duce la resetarea fluxului. Proprietățile care creează BFC:
  • float (valoare diferită de zero)
  • overflow (valoare diferită de visible)
  • display: inline-block
  • position: absolute sau fixed
  • display: flow-root; (relativ nou, creează explicit un BFC)

Tabel comparativ al metodelor:

Metodă	Aplicare la	Mod de resetare	Probleme potențiale
clear: both;	Element	Reset explicit	Element suplimentar
Element gol + clear	Element gol	Reset explicit	Element suplimentar
:after + clear	Container	Pseudo-element	Mai dificil de înțeles pentru începători
overflow: hidden/auto;	Container	Creare BFC	Tăiere / bare de derulare
Crearea BFC cu altă proprietate	Container	Creare BFC	Efecte secundare neintenționate
display: flow-root;	Container	Creare explicită BFC	Suport limitat în browserele vechi

Unde se aplică:

• Pentru ca un element după elementele flotante să înceapă să fie afișat sub ele.
• Pentru ca un container care conține doar elemente flotante să nu se prăbușească pe înălțime.
• În layout-uri complexe pentru controlul fluxului documentului în jurul elementelor flotante.