CSS float és clear
A float és a clear tulajdonságok a régebbi CSS technikák közé tartoznak, amelyekkel elemeket lehet elrendezni egymás mellett. Bár ma már a flexbox és a grid a legnépszerűbb, a float még mindig fontos, különösen szöveg körbefuttatásánál.
A float és clear működése
A float lehetővé teszi, hogy egy elem a szülő tartalom bal vagy jobb oldalára kerüljön, míg a többi tartalom körbefolyja azt. A clear tulajdonság biztosítja, hogy egy új elem ne kerüljön a float mellé, hanem alatta kezdődjön.
| Tulajdonság | Leírás |
|---|---|
| float: left | right | Az elem balra vagy jobbra úszik, a többi tartalom pedig körbefolyik. |
| clear: left | right | both | Megakadályozza, hogy az elem a float mellé kerüljön. |
Float és clear példa
Az alábbi példában egy elem balra, egy másik jobbra úszik, majd egy clear elem biztosítja, hogy a következő tartalom ezek alatt kezdődjön.
A clear: both használatával elérjük, hogy a zöld doboz a két úszó elem alatt helyezkedjen el.
Tippek a float és clear használatához
A float és a clear hatékony lehet egyszerű elrendezéseknél, de modern projektekben érdemes inkább a flexbox vagy grid rendszereket választani.
- A float elsősorban képek és szövegek körbefuttatására ideális.
- Mindig használj clear-t vagy clearfix megoldást, hogy a layout stabil maradjon.
- Ne próbálj teljes elrendezéseket float-tal készíteni, mert nehezen kezelhető és rugalmatlan.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
© 2025 ReadyTools. Minden jog fenntartva.