Чӣ тавр кор мекунад элементҳои парвозкунанда (floats) дар CSS?

float унумед мекунад, ки ун элемент аз ҷараёни одии ҳуҷҷат хориҷ шавад, ва дигар элементҳо (одатан матн ё inline) метавонанд онро аз тарафе, ки дар хосият (left, right) нишон дода шудааст, гирд оранд.

Принсипҳои асосӣ:

• Баромадан аз ҷараён: Элемент бо float ҷой дар ҷараёни одии ҳуҷҷат намегирад.
• Гирдоварӣ: Элементҳои блокӣ, ки дар паҳлӯ ҳастанд, ҷойи элемент бо float намегиранд, ва мазмунашон (элементҳои inline) аз тарафе, ки дар хосият нишон дода шудааст, гирд оянд.
• Таъсир ба падар: Баландии контейнере, ки танҳо элементҳои float дорад, метавонад канда шавад, ва баландии онҳо нодида гирифта шавад.
• clear: Хосият clear (left, right, both) барои пешгирӣ кардани гирдоварӣ аз ҷониби элементҳое, ки пас аз элементи float ҷойгир шудаанд, истифода мешавад.

Масалан:

.image {
  float: left; /* Расм ба чап ҳаракат мекунад */
  margin-right: 10px; /* Маҳдудиятро дар рост барои матн илова мекунем */
}

.text {
  /* Матн расмро гирд меорад */
}

Тавсияҳо:

• Истифодаи float барои сохтани тарҳҳои мураккаб кӯҳна шудааст ва бо Flexbox ё Grid иваз шудааст.
• float ҳоло ҳам метавонад барои эҷоди эффектҳои гирдоварии расмҳо бо матн муфид бошад.
• Барои пешгирӣ аз кандашавии контейнер дар истифодаи float, техникаҳое мисли "clearfix" ё overflow: hidden/auto дар контейнер истифода мешаванд.