Milyen áramlásblokkolási (clearing) módszereket ismer, és milyen helyzetekben alkalmazzák őket?

• overflow: hidden; vagy overflow: auto;: Ez az elem szülőelemére alkalmazandó, amely float-tal rendelkező elem(ek)et tartalmaz. Új blokkformázási kontextust (BFC) hoz létre, így a szülő magába foglalja a körülötte lévő elemeket a magasságába.

Helyzet: A legegyszerűbb módja annak, hogy elrejtse a tartalmat, amely kilóg az elem határain, vagy görgetést alkalmazzon, de ugyanakkor tisztítási módszerként is működik.

• clear: both;: Ez egy olyan elemre vonatkozik, amely nem fogja körülvenni az előző float-tal rendelkező elemeket. Ez az elem az összes körülötte lévő elem alatt helyezkedik el.

Helyzet: Amikor új sort vagy szekciót kell létrehozni egymást körülvevő elemek után.

• clearfix módszer (pseudo-elem ::after): Egy pseudo-elemet ad hozzá a szülőkonténerhez meghatározott tulajdonságokkal, utánozva a clear: both; viselkedését, de anélkül, hogy további HTML-elemeket kellene hozzáadni.

.clearfix::after {
    content: ""; /* Kötelező tartalom a pseudo-elem megjelenítéséhez */
    display: table; /* Új blokkformázási kontextust hoz létre, mint az overflow: hidden; */
    clear: both; /* Tisztítást alkalmaz */
}

Helyzet: A leggyakoribb és ajánlott tisztítási módszer, tiszta és nem zavarja a markup szerkezetét. A szülőelemre alkalmazandó, amely körülveszi az elemeket.

• display: flex vagy display: grid használata: Modern elrendezési módszerek, amelyek nem igényelnek körülölelést az elemek elhelyezéséhez, így kiküszöbölve a tisztítás szükségességét. Helyzet: Bonyolult elrendezések készítésekor vagy amikor rugalmasabb irányítást igényel az elemek elrendezése felett.

• Egy extra elem hozzáadása clear: both;-val (régi módszer): Üres HTML-elemet szúr be az elemek után, és alkalmazza rá a clear: both;-t. Helyzet: Elavultnak és nem kívánatosnak tekintik, mivel redundáns HTML-t ad hozzá.