Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Clear va clearfix

ULASHISH

CSS clear xossasi

clear xossasi suzuvchi elementning YONIDA turgan element bilan nima bo‘lishini belgilaydi.

clear xossasi elementlarning suzuvchi kontent atrofida yoki yonida o‘ralishining oldini oladi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • none - Standart. Elementlarning suzishiga imkon beradi har ikki tomonda
  • left — element chap tomonidagi suzuvchi elementlardan pastga suriladi
  • right — element o‘ng tomonidagi suzuvchi elementlardan pastga suriladi
  • both — element chap va o‘ng tomonidagi suzuvchi elementlardan pastga suriladi
  • inherit — element ota elementining clear qiymatini meros oladi

Misol

Bu yerda clear: left; div2 ni chap tomonidagi suzuvchi div1 ostiga suradi:

div1 {
  float: left;
}

div2 {
  clear: left;
}
O‘zingiz sinab ko‘ring »

CSS Clearfix hiylasi

Agar suzuvchi element o‘zini o‘rab turgan elementdan balandroq bo‘lsa, u konteyneridan "tashqariga toshadi". Bu muammoni hal qilish uchun clearfix hiylasini qo‘shishimiz mumkin:

Clearfix’siz

Clearfix bilan

Clearfix hiylasi ::after psevdo-elementiga asoslanadi va ota konteynerning suzuvchi bola elementlarini to‘g‘ri o‘rab olishini ta’minlash uchun ishlatiladi:

Misol

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

  • .clearfix::after — class="clearfix" ega istalgan element kontentidan keyin yaratiladigan psevdo-elementga ishora qiladi
  • content: "" — psevdo-elementning ko‘rinadigan kontenti bo‘lmasa ham, ko‘rsatilishini ta’minlaydi
  • clear: both — bu chap va o‘ng suzishlarni tozalaydi, keyingi kontentni suzuvchi elementlardan pastga suradi va ota konteynerning ularni o‘z ichiga olishi uchun kengayishiga majbur qiladi
  • display: table — bu suzishlarni o‘z ichiga olishga yordam beradigan yangi blok formatlash kontekstini yaratadi

::after psevdo-elementi haqida keyingi boblarda ko‘proq bilib olasiz.

CSS CSS xossalari

Xususiyat Tavsif
clear Suzuvchi element yonida joylashgan element bilan nima sodir bo‘lishini belgilaydi
float Element chapga, o‘ngga yoki umuman suzmasligi kerakligini belgilaydi

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish