CSSda suzuvchi elementlar (floats) nima?

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

Асосий хусусиятлар:

• Қўшилиш: Float хусусияти қўлланилган элемент ўзининг ота-она контейнери (ёки бошқа float элемент) чегарасига ёки ўнг ёки солга қарай ҳаракат қилади.
• Ўзгартириш: Оддий блок ёки сатридаги мазмун (матн, расмлар) ўша флотланган элементни ўраб олади.
• Тўғрилик контексти: Float элементлар ҳужжатнинг оддий тўғриликдан қисман чиқиб кетади, аммо бошқа элементларнинг позициялашувига таъсир кўрсатади.
• Қўлланилиши: Илкда колонкалар ташкил қилиш ёки расмларни матн билан атрофлаштириш учун қўлланилган. Замонавий веб-дизайнда Flexbox ёки Grid кўпроқ қўлланади.

float хусусиятининг одатий қийматлари:

• left: Элемент солга қарай флотланади.
• right: Элемент ўнгга қарай флотланади.
• none: Элемент флотланмайди (стандарт қиймат).
• inherit: Ота-онадан қийматни мерос олади.
• initial: Стандарт қийматни ўрнатади.

Float билан боғлиқ муаммолар:

• Ота-она контейнери қисқариши: Флотланган элементлардан ташкил топган ота-она контейнер баландлиги қисқариши мумкин.
• Тозалаш: Кейинги элементлар флотланган элементларни ўраб олишини олдини олиш учун clear хусусияти қўлланиши керак.

.image-float {
  float: left; /* Расм солга қарай флотланади */
  margin-right: 10px; /* Расмнинг ўнг томонида бўшлиқ */
}

.text-content {
  /* Бу матн расмни ўраб олади */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Флотланган элементлардан кейин тозалаш */
}