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

CSS Float — бу позициялаш хусусияти бўлиб, элементни унинг контейнери тарафидан бир тарафга (left ёки right) кўчиришга имкон беради, бу эса матн ва inline элементларининг унинг атрофини олишини таъминлайди. Элемент одатий ҳужжат оқимидан чиқарилади, аммо лойиҳанинг бир қисми бўлиб қолади. Илгари кўп колонкали лойиҳалар яратиш ва расмларни матн билан олиш учун қўлланилган, аммо ҳозирда улар асосан Flexbox ва Grid каби янада мослашувчан ва олдиндан билган усуллар орқали муайян вазифаларни ҳал қилиш учун қўлланилади.

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

• none: Элемент одатий оқимда кўрсатилади (стандарт қиймат).
• left: Элемент контейнери чап четига кўчирилади.
• right: Элемент контейнери ўнг четига кўчирилади.
• inherit: Ота элементдан қиймат мерос қилинади.

Ишлатиш мисоли:

.image {
  float: left;
  margin-right: 15px; /* Ўнгдан бўшлиқ, матн унинг атрофини олади */
}

.text {
  /* Матн `.image` синфига эга элементни ораб олади */
}

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

• Токдан тушиш (атрофдаги элементнинг тушиши): Фақат float элементларини ўз ичига олган ота элемент баландликда тушиши мумкин, чунки бу элементлар унинг одатий ўлчамларига киритилмайди.
• Элементлар ўртасида қопланиш: Янада яқин элементлар float элементининг устидан ўтиши мумкин, агар уларнинг ўлчамлари ҳисобга олинмаса.

Муаммоларни ечиш:

• clear хусусияти: float элементни олиб ташламаслиги керак бўлган элементга ўрнатилади. Қийматлар: left, right, both, none.
• Clearfix техникаси: Ота элементга махсус синф қўшиш ёки :after псевдо-элементидан фойдаланиш орқали ота элементнинг тушишини мажбур қилиш.

.container::after {
  content: "";
  display: table; /* Ёки block */
  clear: both;
}

• Замонавий усуллар: Flexbox ёки CSS Gridдан фойдаланиб мураккаб лойиҳалар яратиш.

Floatлар замонавий вебда асосий лойиҳа воситаси бўлмаса-да, уларнинг ишлашини тушуниш эски кодларни сақлаш ва муайян вазифаларни ҳал қилиш учун муҳимдир, масалан, расмларни матн билан олиш.