CSS float

CSS float xossasi

float xossasi elementning konteyner ichida qanday suzishini belgilaydi.

U elementni konteynerning chap yoki o‘ng tomoniga joylashtiradi va matn hamda inline elementlarga uning atrofini o‘rash imkonini beradi.

float xossasi quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

left — element konteynerning chap tomoniga suzadi
right — element konteynerning o‘ng tomoniga suzadi
none — standart. Element suzmaydi va matnda paydo bo‘lgan joyida ko‘rsatiladi
inherit — element ota elementining float qiymatini meros oladi

Maslahat: float xossasi ko‘pincha matnni rasmlar atrofida o‘ratish uchun ishlatiladi!

CSS float: right misoli

float: right qiymati elementning konteyner ichida o‘ngga suzishi kerakligini bildiradi.

Quyidagi misol rasmning o‘ngga suzishi kerakligini belgilaydi.

Maslahat: Ekranni kichraytirsangiz, matn rasm atrofini o‘rab olganini ko‘rasiz.

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...

Misol

img {
float: right;
}

O‘zingiz sinab ko‘ring »

CSS float: left misoli

float: left qiymati elementning konteyner ichida chapga suzishi kerakligini bildiradi.

Quyidagi misol rasmning chapga suzishi kerakligini belgilaydi:

Misol

img {
float: left;
}

O‘zingiz sinab ko‘ring »

CSS float: none misoli

float: none qiymati float uchun standart qiymat bo‘lib, element konteynerida paydo bo‘lgan joyida ko‘rsatiladi.

Quyidagi misolda rasm konteynerda paydo bo‘lgan joyida ko‘rsatiladi:

Misol

img {
float: none;
}

O‘zingiz sinab ko‘ring »

CSS Float bir-birining yonida

HTML <div> elementlari blok elementlar bo‘lib, yangi qatordan boshlanadi va mavjud bo‘lgan to‘liq kenglikni egallaydi. Biroq float: left ishlatsak, <div> elementlarini yonma-yon suzishini (float) ta’minlashimiz mumkin:

Misol

div {
float: left;
padding: 15px;
}

.div1 {
background: red;
}

.div2 {
background: yellow;
}

.div3 {
background: green;
}

O‘zingiz sinab ko‘ring »

CSS float xususiyati

Xususiyat	Tavsif
float	Element chapga, o‘ngga yoki umuman suzmasligi kerakligini belgilaydi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish