Kā darbojas pludiņi elementi (floats) CSS?

Pludiņi elementi (floats) CSS iziet no parastā dokumenta plūsmas un tiek pārvietoti norādītajā virzienā (pa kreisi vai pa labi) savā ietilpīgā blokā. Blakus esošie teksta un satura elementi sāk apvīt pludiņošo elementu pretējā pusē.

Galvenās float īpašības:

left: Elements tiek pārvietots uz kreiso pusi.
right: Elements tiek pārvietots uz labo pusi.
none: Elements paliek parastajā plūsmā (noklusējuma vērtība).
inherit: Manto vērtību no vecāka.

Bieži tika izmantots daudzlīmeņu izkārtojumu veidošanai pirms Flexbox un Grid parādīšanās.

Uzvedības īpatnības:

Pludiņš elements kļūst par bloka elementu, neatkarīgi no sākotnējā attēlojuma veida.
Tēva konteineris neņem vērā pludiņā esošā elementa augstumu, kas var novest pie "saspiešanas" konteinerī. Šo problēmu risina attīrīšanas metodes (clearing).

Attīrīšanas metodes (clearing):

clear īpašība: tiek piemērota elementam, lai novērstu tā apvīšanu ar pludiņiem. Vērtības: left, right, both, none, inherit.
```
/* Elements neapvīs pludiņus no abām pusēm */
.clear-both {
  clear: both;
}
```
Plūsmas notīrīšana (clearfix hack): Pseudo-elementa :after pievienošana vecāku konteinerim ar clear: both un citiem stiliem, lai novērstu saspiešanu.
```
/* Klasisks clearfix */
.clearfix::after {
  content: "";
  display: table; /* vai "block" */
  clear: both;
}
```

Neskatoties uz mūsdienīgāku izkārtojuma metožu parādīšanos, float joprojām var būt noderīgs mazākiem elementiem, piemēram, attēla izvietošanai teksta iekšpusē.