Элементҳои парвозкунанда (float) дар CSS чист…

Элементҳои плов (float) дар CSS хусусиятест, ки имкон медиҳад, ки элемент аз ҷараёни одии ҳуҷҷат хориҷ карда шуда, ба тарафи чап ё рости контейнери худ ҷойгир шавад. Элементҳои ҳамсоя ва матн ин элементро ироқ мекунанд.

Қиматҳои асосии хусусияти float:

left: Элемент ба чап плов мекунад.
right: Элемент ба рост плов мекунад.
none: Элемент дар ҷараёни одӣ боқӣ мемонад (қимати пешфарз).
inherit: Қимат аз падар мегирад.

Маслиҳатҳои истифода:

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

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

Хусусиятҳои рафтор:

Элементҳои плов аз ҷараёни одии ҳуҷҷат хориҷ мешаванд, аммо таъсир ба ҷойгиршавии элементҳои ҳамсоя ва матн доранд.
Волидайни элементҳои плов метавонанд "сӯхта" шаванд, зеро фарзандони пловкунанда дар баландии он дар ҷараёни одӣ таъсир намерасонанд. Барои пешгирӣ, техникаҳое истифода мешаванд, мисли clear ё дигар, масалан, overflow: hidden ё Flexbox/Grid.

Хусусияти clear имкон медиҳад, ки муайян кунед, ки аз кадом тарафҳо элементҳои плов набояд бошанд:

.clear-left {
  clear: left; /* Элемент дар зери ҳар як элементи пловкунанда дар чап ҷойгир мешавад */
}

.clear-right {
  clear: right; /* Элемент дар зери ҳар як элементи пловкунанда дар рост ҷойгир мешавад */
}

.clear-both {
  clear: both; /* Элемент дар зери ҳар ду тараф пловкунанда ҷойгир мешавад */
}

Тарихӣ, элементҳои плов барои сохтани макетҳои бисёрсоҳавӣ истифода мешуданд, аммо ҳоло барои ин мақсад истифодаи Flexbox ё CSS Grid беҳтар аст, зеро онҳо бештар флексибил ва пешгӯишаванда мебошанд. Аммо, float ҳоло ҳам барои ироқ кардани матн атрофи тасвирҳо ё дигар элементҳо муфид аст.

Элементҳои парвозкунанда (float) дар CSS чист?