Kako funkcionišu plutajući elementi (floats) u CSS…

Плавајући елементи (floats) у CSS-у излазе из уобичајеног тока документа и померају се у наведеном правцу (лево или десно) унутар свог садржајног блока. Суседни линијски елементи и садржај почињу да окружују плавајући елемент са супротне стране.

Основне особине float:

left: Елемент се помера налево.
right: Елемент се помера надесно.
none: Елемент остаје у уобичајеном току (подразумевана вредност).
inherit: Наслеђује вредност од родитеља.

Често су коришћени за креирање мултиколонских распореда пре појаве Flexbox и Grid.

Карактеристике понашања:

Плавајући елемент постаје блок, без обзира на почетни тип приказа.
Висина родитељског контејнера не узима у обзир висину плавајућег елемента, што може довести до "сипања" контејнера. За решавање овог проблема користе се методе чишћења (clearing).

Методе чишћења:

clear својство: Примењује се на елемент како би се спречило његово окруживање плавајућим елементима. Вредности: left, right, both, none, inherit.
```
/* Елемент неће окруживати плавајуће елементе са обе стране */
.clear-both {
  clear: both;
}
```
Техника clearfix: додавање псевдо-елемента :after родитељском контејнеру са clear: both и другим стиловима за спречавање сливања.
```
/* класични clearfix */
.clearfix::after {
  content: "";
  display: table; /* или "block" */
  clear: both;
}
```

Упркос појави савременијих метода распореда, float још увек може бити користан за мале елементе, на пример, за постављање слике унутар текста.

Kako funkcionišu plutajući elementi (floats) u CSS?