Kā darbojas plūstošie elementi (floats) CSS?

float izņem elementu no parastā dokumenta plūsmas, ļaujot citiem elementiem (parasti teksta vai inline elementiem) to apņemt no norādītās puses (left, right).

Pamatprincipi:

• Izņemšana no plūsmas: Elements ar float neietilpst parastajā dokumenta plūsmā.
• Aizvīšana: Bloka blakus esošie elementi neieņems vietu ar float, un to saturs (inline elementi) to apņems no norādītās puses.
• Ietekme uz vecāku: Vecāku konteineris, kas satur tikai plūstošus elementus, var samazināties, ignorējot to augstumu.
• clear: clear īpašība (left, right, both) tiek izmantota, lai novērstu elementu apņemšanu pēc plūstošā elementa.

Piemērs:

.image {
  float: left; /* Attēls tiek pārvietots pa kreisi */
  margin-right: 10px; /* Pievienojam labajā pusē atstarpi tekstam */
}

.text {
  /* Teksts apņems attēlu */
}

Ieteikumi:

• float lietošana ir novecojusi sarežģītu izkārtojumu veidošanai un ir aizstāta ar Flexbox vai Grid.
• float joprojām var būt noderīgs, lai radītu efektu, kad attēli ir apņemti ar tekstu.
• Lai novērstu vecāku konteineru sabrukšanu, lietojot float, tiek izmantotas tehnikas kā "clearfix" vai overflow: hidden/auto.