Ce metode de blocare a fluxului (clearing) cunoașteți și în ce situații sunt aplicate?

• overflow: hidden; sau overflow: auto;: Se aplică elementului părinte al unui element(e) cu float. Creează un nou context de formatare a blocului (BFC), făcând ca părintele să includă elementele înconjurătoare în înălțimea sa.

Situație: Cel mai simplu mod atunci când trebuie să ascunzi conținutul care depășește limitele elementului sau să aplici derulare, dar funcționează și ca metodă de curățare.

• clear: both;: Se aplică unui element care nu trebuie să înconjoare elementele anterioare cu float. Acest element va fi plasat sub toate elementele înconjurătoare.

Situație: Când trebuie să creezi un rând sau o secțiune nouă după elemente care se înconjoară reciproc.

• Metoda clearfix (pseudo-elemente ::after): Adaugă un pseudo-element la containerul părinte cu proprietăți specifice, imitând comportamentul de clear: both;, dar fără a fi nevoie să adaugi elemente HTML suplimentare.

.clearfix::after {
    content: ""; /* Conținut obligatoriu pentru afișarea pseudo-elementului */
    display: table; /* Creează un nou context de bloc, ca și overflow: hidden; */
    clear: both; /* Aplică curățarea */
}

Situație: Cel mai comun și recomandat mod de curățare, care este curat și nu perturbă structura markup-ului. Se aplică elementului părinte care conține elemente înconjurătoare.

• Utilizarea display: flex sau display: grid: Metode moderne de layout care nu necesită înconjurare pentru poziționare, eliminând astfel necesitatea de curățare. Situație: La construirea de layout-uri complexe sau când este nevoie de un control mai flexibil al aranjamentului elementelor.

• Adăugarea unui element suplimentar cu clear: both; (metoda veche): Inserează un element HTML gol după elementele înconjurătoare și îi aplică clear: both;. Situație: Este considerată o metodă învechită și nedorită, deoarece adaugă HTML redundant.