clearfix

2025.06.17.

2 perc olvasás

Mit jelent a „clearfix”?

A clearfix kifejezés főleg webfejlesztésben, CSS (Cascading Style Sheets) környezetben használt szó. Akkor használjuk, amikor egy HTML elem tartalmaz lebegtetett (float-olt) elemeket, és szeretnénk elérni, hogy a szülő elem magassága automatikusan igazodjon a benne található float-tal rendelkező gyermekelemek magasságához – tehát „kiszámolja”, hogy mekkora hely kell neki.

Tartalom

Ez azért fontos, mert alapból, ha egy szülő elem csak float-olt gyermekeket tartalmaz, akkor a szülő magassága 0 lesz, ami elronthatja az oldal szerkezetét és kinézetét. A clearfix módszer ezt a hibát javítja.

Hogyan működik a clearfix?

A clearfix egy olyan CSS technika/trükk, amely egy „láthatatlan” tartalomjegyzéket helyez el a lebegtetett elemek után, így a szülő elem magassága automatikusan igazodik.

Tipikus példák listában:

HTML példa – Float probléma nélkül clearfix:
```
 A
 B
```
Eredmény: A container magassága 0 px, mert csak lebegtetett elemeket tartalmaz.
CSS Clearfix hozzáadása:
```
.clearfix::after {
 content: "";
 display: table;
 clear: both;
}
```
```
 A
 B
```
Eredmény: A container automatikusan akkora magasságot kap, hogy beleférjenek a gyermekei.
Clearfix röviden összefoglalva:
- Megoldja a lebegtetett (float-olt) elemek okozta szülő-magassági problémákat.
- Gyakran egy „helper osztályként” (.clearfix) használják a CSS-ben.
- Modern megoldás helyette a Flexbox vagy a Grid, de a clearfix régi kódokban máig előfordul.

Szinonimák, rokon kifejezések

A clearfix-nek nincs hivatalos egy-az-egyben magyar szinonimája, azonban rokon megoldások lehetnek:

clear-fix (ugyanígy írva, más szerzőknél is előfordul)
clearfix hack
clearfix technika
clearfix helper

Angolul többféle elnevezés létezik, de mind ugyanarra a problémára utalnak.

Összefoglalás

A clearfix egy CSS trükk, amely megoldja a lebegtetett elemek szülő-tartó magassági problémáit. Főként régebbi weboldalakban életmentő megoldás, de modern eszközökkel (Flexbox, CSS Grid) már kevésbé szükséges.

Ha további példák vagy magyarázat érdekel a „clearfix” témában, szólj nyugodtan!