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.