Ce metode de clearing cunoști și în ce situații sunt aplicate?

Metode de prevenire a fluxului:

• clear: left; — împiedică fluxul din stânga. Se aplică atunci când elementul nu trebuie să fie plasat lângă elementele flotante din stânga.
• clear: right; — împiedică fluxul din dreapta. Se aplică atunci când elementul nu trebuie să fie plasat lângă elementele flotante din dreapta.
• clear: both; — împiedică fluxul din ambele părți. Se aplică atunci când elementul nu trebuie să fie plasat lângă niciun element flotant. Aceasta este cea mai comună variantă.
• clear: none; (valoarea implicită) — permite fluxul.

Aplicații:

• Pentru prevenirea "prăbușirii" containerului părinte: Dacă toate elementele copil ale părintelui flotant (au float), containerul părinte își pierde înălțimea și se prăbușește. Adăugarea unui element cu clear: both; după elementele flotante din interiorul părintelui sau utilizarea pseudo-elementului ::after cu clear: both; rezolvă această problemă.
• Pentru poziționarea corectă a elementelor după cele flotante: Dacă elementele normale (ne flotante) trebuie să fie plasate sub cele flotante, nu lângă ele.
• Pentru crearea de "rânduri" sau "linii" în layout-urile flotante: Când elementele cu float trebuie să fie aranjate în mai multe rânduri, clear este folosit pentru a începe un nou rând.

Exemplu de utilizare a pseudo-elementului ::after pentru curățare:

.clearfix::after {
  content: ""; /* Important pentru afișarea pseudo-elementului */
  display: table; /* Sau block */
  clear: both; /* Proprietatea principală pentru curățare */
}

Această clasă clearfix este apoi aplicată elementului părinte care conține elementele copil flotante.