CSSda suzuvchi elementlar (floats) qanday ishlaydi?

float элементни одан чиқаради одатий ҳужжат тўқимаси, бошқа элементларга (одатда матн ёки inline) уни белгиланган томондан (left, right) ороиш имконини беради.

Асосий принциплар:

• Тўқимадан чиқариш: float билан элемент одатий ҳужжат тўқимасида ўрин олмайди.
• Ороиш: Янада яқин блок элементлар float элемент ўрнини эгалламайди, ва уларнинг мазмуни (inline элементлар) белгиланган томондан уни орадилар.
• Отага таъсири: Фақат флоти элементларини ўз ичига олган ота контейнери баландлиги сўкланиши мумкин, уларнинг баландлиги инобатга олинмайди.
• clear: clear хусусияти (left, right, both) флоти элементдан кейин келаётган элементлар уни ороишини олдини олиш учун қўлланилади.

Misol:

.image {
  float: left; /* Расм солга ҳаракат қилади */
  margin-right: 10px; /* Матн учун ўнг томондан бўшлиқ қўшамиз */
}

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

Тавсиялар:

• float қўлланиши мураккаб макетлар яратиш учун эскирган ва Flexbox ёки Grid билан алмаштирилган.
• float ҳали ҳам матн билан расмлар орасида эффект яратиш учун фойдали бўлиши мумкин.
• float қўлланганда ота контейнери қўшилиши олдини олиш учун "clearfix" ёки overflow: hidden/auto техникалари қўлланилади.