Kaip veikia plaukiojantys elementai (floats) CSS?

float ištrina elementą iš įprasto dokumento srauto, leidžiant kitiems elementams (paprastai tekstiniams ar inline elementams) jį apgaubti iš nurodytos pusės (left, right).

Pagrindiniai principai:

• Ištraukimas iš srauto: Elementas su float ne užima vietos įprastame dokumento sraute.
• Apvyniojimas: Gretimi blokiniai elementai ne užims float elemento vietos, o jų turinys (inline elementai) jį apgaubs iš nurodytos pusės.
• Įtaka tėvui: Tėvinio konteinerio, kuris turi tik plaukiančius elementus, aukštis gali sumažėti, ignoruojant jų aukštį.
• clear: clear savybė (left, right, both) naudojama siekiant išvengti apvyniojimo po plaukiančiu elementu.

Pavyzdys:

.image {
  float: left; /* Vaizdas pasislenka į kairę */
  margin-right: 10px; /* Pridedame dešinį tarpą tekstui */
}

.text {
  /* Tekstas apgaubs vaizdą */
}

Rekomendacijos:

• float naudojimas yra pasenęs sudėtingiems maketams kurti ir pakeistas Flexbox arba Grid.
• float vis dar gali būti naudingas kuriant efektą, kai vaizdai apgaubiami tekstu.
• Norint išvengti tėvinio konteinerio susitraukimo naudojant float, taikomos technikos kaip "clearfix" arba overflow: hidden/auto.