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

A float eltávolít egy elemet a dokumentum normál áramlásából, lehetővé téve más elemek (általában szöveg vagy inline elemek) számára, hogy az adott oldalról (pl. left, right) körülvegyék.

Alapelvek:

• Áramlásból való kivonás: Egy float-tal rendelkező elem nem foglal helyet a dokumentum normál áramlásában.
• Körülölelés: A szomszédos blokk elemek nem foglalják el a float-os elem helyét, tartalmuk (inline elemek) pedig az adott oldalról fogja körülvenni.
• Hatás a szülőre: A csak float elemeket tartalmazó szülő konténer magassága összezsugorodhat, figyelmen kívül hagyva azok magasságát.
• clear: A clear tulajdonság (left, right, both) használható arra, hogy megakadályozza az elemek körülölelését, amelyek utána következnek a float elemnek.

Példa:

.image {
  float: left; /* A kép balra tolódik */
  margin-right: 10px; /* Jobb oldali margót adunk a szöveghez */
}

.text {
  /* A szöveg körül fogja venni a képet */
}

Ajánlások:

• A float használata elavult a komplex elrendezések létrehozására, helyette a Flexbox vagy a Grid ajánlott.
• A float még mindig hasznos lehet képek szöveggel való körülölelése effektusának létrehozására.
• A float használatakor a szülő konténer összeomlásának elkerülése érdekében technikákat alkalmaznak, mint például a "clearfix" vagy az overflow: hidden/auto.