float
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
float xususiyati element chapga, o‘ngga float qilinishi yoki umuman float qilinmasligini belgilaydi.
Eslatma: Absolyut joylashtirilgan elementlar float xususiyatini e’tiborsiz qoldiradi!
Eslatma: Float element yonidagi elementlar uni aylanib oqib o‘tadi. Bunga yo‘l qo‘ymaslik uchun clear xususiyatidan yoki clearfix usulidan (clearfix hack) foydalaning (ushbu sahifa oxiridagi misolga qarang).
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS1 |
| JavaScript sintaksisi: | object.style.cssFloat="left" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS sintaksisi
float: none|left|right|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| none | Element float qilinmaydi (matnda qayerda uchrasa, o‘sha joyda ko‘rsatiladi). Bu standart qiymat | Demo ❯ |
| left | Element o‘z konteynerining chap tomoniga float qilinadi | Demo ❯ |
| right | Element o‘z konteynerining o‘ng tomoniga float qilinadi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Rasm matnda qayerda uchrasa, o‘sha joyda ko‘rsatilsin (float: none):
img {
float: none;
}
O‘zingiz sinab ko‘ring »
Misol
Paragrafning birinchi harfini chapga float qiling va unga uslub bering:
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
O‘zingiz sinab ko‘ring »
Misol
Gorizontal menyu yaratish uchun float’ni giperhavolalar ro‘yxati bilan birga ishlating:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
O‘zingiz sinab ko‘ring »
Misol
Sarlavha (header), pastki qism (footer), chap kontent va asosiy kontentga ega bosh sahifa yaratish uchun float’dan foydalaning:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
O‘zingiz sinab ko‘ring »
Misol
Ko‘rsatilgan <p> elementining chap yoki o‘ng tomonida float elementlarga ruxsat bermang:
img {
float: left;
}
p.clear {
clear: both;
}
O‘zingiz sinab ko‘ring »
Misol
Agar float element uni o‘z ichiga olgan elementdan balandroq bo‘lsa, u konteyneridan tashqariga chiqib ketadi. Buni "clearfix hack" usuli bilan tuzatish mumkin:
.clearfix::after {
content: "";
clear: both;
display: table;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS float
HTML DOM ma’lumotnomasi: cssFloat xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!