Как работят плаващите елементи (floats) в CSS…

Плаващите елементи (floats) в CSS се изваждат от нормалния поток на документа и се преместват в посочената посока (наляво или надясно) вътре в своя контейнер. Съседните inline елементи и съдържанието започват да обграждат плаващия елемент от противоположната страна.

Основните свойства на 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 все още може да бъде полезен за малки елементи, например за поставяне на изображение вътре в текст.

Как работят плаващите елементи (floats) в CSS?