CSSda suzuvchi elementlar (floats) nima?

CSS Float — bu pozitsiyalash xususiyati bo‘lib, elementni uning konteynerining bir tomoniga (left yoki right) ko‘chirishga imkon beradi, bu esa matn va inline elementlarning uni o‘rab olishini ta’minlaydi. Element odatiy hujjat oqimidan chiqariladi, ammo maketning bir qismi bo‘lib qoladi. Dastlab, ular ko‘p ustunli maketlar yaratish va rasmni matn bilan o‘rab olish uchun ishlatilgan, ammo hozirda ular asosan Flexbox va Grid kabi yanada moslashuvchan va bashorat qilinadigan usullar bilan muayyan vazifalarni hal qilish uchun qo‘llaniladi.

float xususiyatining asosiy qiymatlari:

• none: Element odatiy oqimda ko‘rsatiladi (standart qiymat).
• left: Element konteynerning chap chetiga ko‘chiriladi.
• right: Element konteynerning o‘ng chetiga ko‘chiriladi.
• inherit: Ota elementdan qiymat meros qilib oladi.

Foydalanish misoli:

.image {
  float: left;
  margin-right: 15px; /* O‘ngdagi bo‘shliq, matn uni o‘rab oladi */
}

.text {
  /* Matn `.image` sinfidagi elementni o‘rab oladi */
}

Float bilan bog‘liq muammolar:

• Oqimdan chiqib ketish (atrofdagi elementning qulab tushishi): Faqat float elementlarni o‘z ichiga olgan ota element balandlikda qulab tushishi mumkin, chunki bu elementlar uning odatiy o‘lchamlariga kiritilmaydi.
• Elementlarning ustma-ust joylashishi: Yonma-yon keladigan elementlar, ularning o‘lchamlari hisobga olinmasa, float elementining ustiga chiqishi mumkin.

Muammolarni hal qilish:

• clear xususiyati: Float qilinmagan element uchun o‘rnatiladi. Qiymatlar: left, right, both, none.
• Clearfix texnikasi: Ota elementga maxsus sinf qo‘shish yoki pseudo-element :after yordamida ota elementning qulab tushishini majbur qilish.

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

• Zamonaviy usullar: Flexbox yoki CSS Grid yordamida murakkab maketlar yaratish.

Floatlar hozirgi webda asosiy maket vositasi bo‘lmasa-da, ularning qanday ishlashini tushunish eski kodlarni qo‘llab-quvvatlash va muayyan vazifalarni hal qilish uchun muhimdir, masalan, rasmni matn bilan o‘rab olish.