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

float премахва елемент от нормалния поток на документа, позволявайки на други елементи (обикновено текстови или inline) да го обгърнат от посоката, посочена в свойството (left, right).

Основни принципи:

• Премахване от потока: Елемент с float не заема място в нормалния поток на документа.
• Обвиване: Съседните блокови елементи няма да заемат мястото на float елемента, а съдържанието им (inline елементи) ще го обгърне от посочената страна.
• Влияние върху родителя: Височината на родителския контейнер, който съдържа само плаващи елементи, може да се свие, игнорирайки тяхната височина.
• clear: Свойството clear (left, right, both) се използва за предотвратяване на обвиване от елементи, разположени след плаващия елемент.

Пример:

.image {
  float: left; /* Изображението се измества наляво */
  margin-right: 10px; /* Добавяме отстъп вдясно за текста */
}

.text {
  /* Текстът ще обгърне изображението */
}

Препоръки:

• Използването на float вече е остаряло за създаване на сложни оформления и е заменено с Flexbox или Grid.
• float все още може да бъде полезен за създаване на ефект на обвиване на изображения с текст.
• За да се избегне колапс на родителския контейнер при използване на float, се прилагат техники като "clearfix" или overflow: hidden/auto върху родителя.