Float

CSS Joylashuvi - Float va Clear

CSS float xususiyati element qanday suzishi kerakligini belgilaydi.

CSS clear xususiyati tozalangan elementning yonida qaysi elementlar suzishi mumkinligini va qaysi tomonda ekanligini belgilaydi.

Float Xususiyati

float xususiyati tarkibni joylashtirish va formatlash uchun ishlatiladi, masalan, rasmni konteyner ichidagi matn atrofida suzdirish uchun.

float xususiyati quyidagi qiymatlardan birini olishi mumkin:

• left - Element konteynerining chap tomoniga suzadi
• right - Element konteynerining o'ng tomoniga suzadi
• none - Element suzmaydi (matnda uchragan joyida ko'rsatiladi). Bu standart qiymatdir
• inherit - Element ota-onasining float qiymatini meros qilib oladi

Eng oddiy foydalanishida, float xususiyati rasmlarni matn atrofida o'rab olish uchun ishlatiladi.

Misol - float: right;

Quyidagi misolda rasm matn ichida o'ng tomonga suzishi ko'rsatilgan:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

img {
  float: right;
}

Misol - float: left;

Quyidagi misolda rasm matn ichida chap tomonga suzishi ko'rsatilgan:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

img {
  float: left;
}

Misol - Hech qanday suzish

Quyidagi misolda rasm matn ichida uchragan joyida ko'rsatiladi (float: none;):

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

img {
  float: none;
}

Misol - Bir-biri bilan suzish

Odatda div elementlari bir-birining ustiga joylashadi. Biroq, agar biz float: left ni ishlatsak, elementlarni yonma-yon joylashtirishimiz mumkin:

div {
  float: left;
  padding: 15px;
}
 
.div1 {
  background: red;
}
 
.div2 {
  background: yellow;
}
 
.div3 {
  background: green;
}

CSS Joylashuvi - Clear va Clearfix

Clear Xususiyati

Agar biz float xususiyatidan foydalansak va keyingi elementni pastga joylashtirishni xohlasak (o'ng yoki chapga emas), unda clear xususiyatidan foydalanishimiz kerak.

clear xususiyati suzuvchi elementning yonida joylashgan elementga nima bo'lishini belgilaydi.

clear xususati quyidagi qiymatlardan birini olishi mumkin:

• none - Element chap yoki o'ngda suzuvchi elementlardan pastga surilmaydi. Bu standart qiymatdir.
• left - Element chap tomonda suzuvchi elementlardan pastga suriladi.
• right - Element o'ng tomonda suzuvchi elementlardan pastga suriladi.
• both - Element chap va o'ng tomonda suzuvchi elementlardan pastga suriladi.
• inherit - Element ota-onasining clear qiymatini meros qilib oladi.

Floatslarni tozalashda, clear va floatni moslashtirish muhimdir: agar element chapga suzsa, unda chapga tozalash kerak. Sizning suzuvchi elementingiz suzishda davom etadi, lekin tozalangan element veb-saytning pastki qismida ko'rinadi.

Misol

Quyidagi misolda chap tomonga suzishni tozalaydi. Bu yerda <div2> elementi chap tomonga suzuvchi <div1> elementining ostiga suriladi:

div1 {
  float: left;
}
 
div2 {
  clear: left;
}

Clearfix Hack

Agar suzuvchi element konteyner elementidan balandroq bo'lsa, u o'z konteyneridan "oshadi". Biz bu muammoni hal qilish uchun clearfix hack qo'shishimiz mumkin:

Hech qanday Clearfix

Clearfix bilan

Misol

.clearfix {
  overflow: auto;
}

overflow: auto clearfix yaxshi ishlaydi, agar siz chegara va to'ldirishni boshqarishda davom etsangiz (aks holda siz scrollbars ko'rishingiz mumkin). Yangi, zamonaviy clearfix hack esa xavfsizroq bo'lib, quyidagi kod ko'plab veb-sahifalarda ishlatiladi:

Misol

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Siz ::after pseudo-elementi haqida keyinchalik bir bobda ko'proq ma'lumot olasiz.