Milyen clearing módszereket ismersz, és milyen helyzetekben alkalmazzák őket?

Áramlásmegelőző módszerek:

• clear: left; — megakadályozza a bal oldali áramlást. Akkor alkalmazandó, amikor az elem nem helyezkedhet el a balra áramló elemek mellett.
• clear: right; — megakadályozza a jobb oldali áramlást. Akkor alkalmazandó, amikor az elem nem helyezkedhet el a jobbra áramló elemek mellett.
• clear: both; — mindkét oldalról megakadályozza az áramlást. Akkor alkalmazandó, amikor az elem nem helyezkedhet el semmilyen áramló elem mellett. Ez a leggyakoribb változat.
• clear: none; (alapértelmezett érték) — engedélyezi az áramlást.

Alkalmazások:

• A "összeomlás" megelőzése a szülő konténerben: Ha minden gyermek elem a szülőn belül áramlik (float-olt), akkor a szülő konténer elveszíti magasságát és összeroskad. Egy clear: both; értékű elem hozzáadása a float-olt elemek után vagy a ::after pszeudo-elem használata megoldja ezt a problémát.
• A float-olt elemek utáni helyes elrendezés: Ha a normál (nem float-olt) elemeknek a float-oltak alatt kell elhelyezkedniük, nem mellettük.
• Sorok vagy "sorozatok" létrehozása float-olt layout-okban: Amikor a float-olt elemek több sorban kell elrendezni, a clear a sor kezdésére szolgál.

Példa a ::after pszeudo-elem használatára a tisztításra:

.clearfix::after {
  content: ""; /* Fontos a pszeudo-elem megjelenítéséhez */
  display: table; /* Vagy block */
  clear: both; /* Fő tulajdonság a tisztításhoz */
}

Ez a clearfix osztály alkalmazandó a szülő elemre, amely tartalmazza a float-olt gyermekelemeket.