Чӣ тавр кор мекунанд унсурҳои парвозкунанда (floats)…

Элементҳои парвозкунанда (float) дар 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?