Hogyan működnek az úszó elemek (floats) a CSS-ben…

A CSS-ben a lebegő elemek (floatok) kivonódnak a normál dokumentumfolyamból, és a megadott irányba (balra vagy jobbra) mozognak a tartalmazó blokk belsejében. A szomszédos inline elemek és a tartalom elkezdenek körülölelni a lebegő elemet az ellenkező oldalról.

A float fő tulajdonságai:

left: Az elem balra mozog.
right: Az elem jobbra mozog.
none: Az elem a normál folyamatban marad (alapértelmezett érték).
inherit: A szülőtől örökli az értéket.

Gyakran használták többoszlopos elrendezések létrehozására, mielőtt megjelentek a Flexbox és Grid módszerek.

Viselkedési jellemzők:

A lebegő elem blokká válik, függetlenül az eredeti megjelenítési típustól.
A szülő konténer magassága nem veszi figyelembe a lebegő elem magasságát, ami a konténer "összeomlásához" vezethet. Ennek megoldására tisztítási módszereket alkalmaznak.

Tisztítási módszerek:

clear tulajdonság: alkalmazható egy elemre, hogy megakadályozza, hogy lebegő elemek vegyék körül. Értékek: left, right, both, none, inherit.
```
/* Az elem nem fogja körülvenni a lebegő elemeket mindkét oldalon */
.clear-both {
  clear: both;
}
```
Clearfix technika: pseudo-elem hozzáadása a szülő konténerhez :after-rel, clear: both-val és más stílusokkal, hogy elkerüljük a összeomlást.
```
/* klasszikus clearfix */
.clearfix::after {
  content: "";
  display: table; /* vagy "block" */
  clear: both;
}
```

Bár modernebb layout módszerek jelentek meg, a float még mindig hasznos lehet kisebb elemekhez, például kép elhelyezéséhez szövegben.

Hogyan működnek az úszó elemek (floats) a CSS-ben?