Milyen áramlástilalmi (clearing) módszereket ismersz és hol alkalmazzák őket?

• clear: both;: A leggyakoribb és legmegbízhatóbb módszer. Alkalmazható egy elemre, amelynek a korábbi lebegő elemek alatt kell elhelyezkednie. Ez lehet egy különálló üres elem vagy a layout egyik eleme.
• Üres elem hozzáadása clear: both;-val: Néha használják a lebegés garantált törlésére, különösen összetett layoutok esetén. Ez egy üres div vagy más blokk elem.
• Pseudo-elem :after clear: both;-val: Korszerűbb megközelítés. Alkalmazható a lebegő elemek tartalmazójára. Létrehoz egy "virtuális" elemet a tartalom végén, így törölve a belső áramlást.

/* Pseudo-elem :after használatának példája */
.container::after {
  content: ""; /* Kötelező tulajdonság a pseudo-elem számára */
  display: table; /* Gyakran használják jobb kompatibilitásért */
  clear: both;
}

• overflow: hidden; vagy overflow: auto;: Alkalmazható a lebegő elemek tartalmazójára. Új blokk-formázási kontextust hoz létre, amely "tisztítja" a belső áramlást. Ez azonban levághatja a tartalmat vagy görgetősávokat hozhat létre, ha a tartalom túlmegy a határokon.
• Blokk-formázási kontextus (BFC): Az összes fent említett módszer, kivéve a kifejezetten üres elemet, valamilyen módon új BFC-t hoz létre, ami a folyamat törléséhez vezet. A BFC-t létrehozó tulajdonságok:
  • float (nem nulla érték)
  • overflow (más érték, mint a visible)
  • display: inline-block
  • position: absolute vagy fixed
  • display: flow-root; (újabb, kifejezetten BFC-t hoz létre)

Metódusok összehasonlító táblázata:

Módszer	Alkalmazásra kerül	Folyamat törlése	Potenciális problémák
clear: both;	Elem	Kifejezett törlés	Kiegészítő elem
Üres elem + clear	Üres elem	Kifejezett törlés	Kiegészítő elem
:after + clear	Konténer	Pseudo-elem	Nehezebb megérteni kezdők számára
overflow: hidden/auto;	Konténer	BFC létrehozás	Levágás / görgetősávok
BFC más tulajdonsággal létrehozva	Konténer	BFC létrehozás	Nem szándékos, mellékhatások
display: flow-root;	Konténer	Kifejezett BFC létrehozás	Régi böngészőkben korlátozott támogatás

Hol alkalmazható:

• Annak érdekében, hogy a lebegő elemek után következő elem alatt jelenjen meg.
• Annak érdekében, hogy a csak lebegő elemeket tartalmazó konténer ne zsugorodjon magasságban.
• Összetett layoutokban a dokumentum áramlásának ellenőrzésére a lebegő elemek körül.