CSS'da suzilgan elementlar (float) nima?

CSS'da float (yüzen) elementleri, elementni odatdagi oqimdan chiqarib, konteynerining chap yoki o‘ng tomoniga joylashtirish imkonini beradigan xususiyatdir. Yaqin elementlar va matn bu yüzen elementni o‘rab oladi.

float xususiyatining asosiy qiymatlari:

• left: Element chapga yüzer.
• right: Element o‘ngga yüzer.
• none: Element odatdagi oqimda qoladi (standart qiymat).
• inherit: Ota elementdan meros oladi.

Foydalanish misollari:

.float-left {
  float: left; /* Element chapga yüzer */
  margin-right: 10px; /* Matn uchun o‘ng bo‘shliq qo‘shamiz */
}

.float-right {
  float: right; /* Element o‘ngga yüzer */
  margin-left: 10px; /* Matn uchun chap bo‘shliq qo‘shamiz */
}

Xulosa:

• Yüzen element odatdagi oqimdan chiqariladi, ammo yonidagi elementlar va matnning joylashuviga ta’sir qiladi.
• Yüzen elementning ota-esi "qisqarishi" mumkin, chunki yüzen bolalar uning balandligini odatdagi oqimda ta’sir qilmaydi. Buning oldini olish uchun clear yoki boshqa texnikalar, masalan, overflow: hidden yoki Flexbox/Grid ishlatiladi.
• clear xususiyati, qaysi tomonlarda yüzen elementlar bo‘lishi mumkin emasligini belgilash uchun ishlatiladi:

  .clear-left {
    clear: left; /* Element, chapdagi yüzen elementlardan keyin joylashadi */
  }
  
  .clear-right {
    clear: right; /* Element, o‘ngdagi yüzen elementlardan keyin joylashadi */
  }
  
  .clear-both {
    clear: both; /* Element, har ikkala tomondagi yüzen elementlardan keyin joylashadi */
  }
  

Tarixan, yüzen elementlar ko‘p ustunli maketlar yaratish uchun ishlatilgan, ammo hozirda bu maqsad uchun Flexbox yoki CSS Grid afzalroq, chunki ular ko‘proq moslashuvchan va bashorat qilinadigan. Biroq, float hali ham rasm yoki boshqa elementlar atrofida matnni o‘rab olish uchun foydalidir.