Brauzerda bloklarni to‘g‘ri joylashtirish, juda muhim sanaladi, chunki qulay joylashtirilgan bloklar foydalanuvchilarga saytdan foydalanishga qulayliklar tug‘diradi. Nimaga faqat bloklar haqida gaplashioqdamiz? chunki hozirgi kunda ko‘p saytlarning asosi aynan bloklardir, ya’ni saytlarning strukturalari bloklar orqali yaratilmoqda.
Bunday strukturali saytlarga raqobat qilib, jadval asosida yaratilgan saytlarni keltirish mumkin. Ularning qaysi biri yaxshiligi hususida ko‘p tortishilar bo‘lgan va bo‘lmoqda ham. Bu masalani boshqa maqolalarda ko‘rib o‘tamiz.

Demak, bloklarni veb sahifa bo‘ylab joylashtirish(bunday bloklarni yana suzuvchi bloklar(плавающие блоки) deb ham atashadi), CSSning «float» hususiyati asosida amalga oshiriladi. Bu xususiyat uch xil qiymatni qabul qilishi mumkin:

left — strukturali blok chap tomonga suriladi.

right — strukturali blok o‘ng tomonga suriladi.

none — blok surilmaydi.

Keling dastlab surilishlarsiz oddiy misol ko‘ramiz, ya’ni «float» ishlatmaymiz.

<html>
<head>
 <title>Float</title>
  <style>
.box1 {
width:75px;
height:75px;
border:1px solid red;
background-color:orange;
}
.box2 {
width:75px;
height:75px;
border:1px solid red;
background-color:pink;
}
.box3 {
width:75px;
height:75px;
border:1px solid red;
background-color:gray;
}
  </style>
 </head>
 <body>
<div class="box1">Bir - one</div>
<div class="box2">ikki - two</div>
<div class="box3">uch - three</div>
 </body>
 </html>

14css_1

3 ta blok odatiy holda joylashdi, ya’ni chap tomondan boshlab, har bir blok pastka qarab ketma-ket o‘rnatildi. Agar «float» bermasangiz shu ko‘rinishda joylashuv amalga oshadi. Endi «float» orqali o‘ng tomondan boshlab joylashtiramiz.

<html>
 <head>
  <title>Fload</title>
  <style>
.box1 {
width:75px;
height:75px;
border:1px solid red;
background-color:orange;
float:right;
}
.box2 {
width:75px;
height:75px;
border:1px solid red;
background-color:pink;
float:right;
}
.box3 {
width:75px;
height:75px;
border:1px solid red;
background-color:gray;
float:right;
}
  </style>
 </head>
 <body>
<div class="box1">Bir - one</div>
<div class="box2">ikki - two</div>
<div class="box3">uch - three</div>
 </body>
 </html>

14css_2

Agar, 2-blokdan surilishni olib tashlasak, u alohida bo‘lib qoladi va o‘zining doimiy joylashuvida joylashadi. YUqoridagi kod, faqat 2 blok uchun «float:right» qatorini olib tashlaymiz.

.box3 {
width:75px;
height:75px;
border:1px solid red;
background-color:gray;
}

14css_3

Bu usul rasmlarga ta’rif berishda foydalidir, ya’ni rasm, uning yonida bu rasmga ta’rif.

<html>
 <head>
  <title>Float</title>
  <style>
.box1 {
width:150px;
height:150px;
color:black bold;
text-align:center;
border:1px solid red;
background-color:pink;
float:right;
}
  </style>
 </head>
 <body>
<div class="box1">MUFC</div>
<div>Manchester United Football klubi 1878 yilda tashkil topgan bo'lib, 1902 yilda MANCHESTER UNITED nomini olgan</div>
 </body>
 </html>

14css_4

«float» haqida gapirilganda, albatta «clear» xususiyatini ham eslab o‘tish lozim. Bu xususiyat berilgan qiymat asosida, quyi qism orqali joylashtirishni amalga oshiradi, biroz tushunarsiz,  lekin misolda tushunib olishingiz mumkin, qiymatlari:

left — blok barcha chap tomondagi bloklarning quyi qismida joylashadi;

right — blok barcha o‘ng tomondagi bloklarning quyi qismida joylashadi;

both — blok barcha bloklarning quyi qismida joylashadi;

none — quyi qismda joylashtirish olib tashlanadi.

Dastlab, «clear» xususiyatisiz misol ko‘ramiz.

<html>
 <head>
  <title>Float</title>
  <style>
.box1 {
width:100px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:150px;
border:1px solid red;
background-color:orange;
float:right;
}
.box3 {
width:300px;
height:80px;
border:1px solid red;
background-color:gray;
float:right;
}
  </style>
 </head>
 <body>
<div class="box1">SideBar</div>
<div class="box2">Asosiy qism</div>
<div class="box3">Footer</div>
 </body>
 </html>

14css_5

«Footer» yozuvli blokga e’tibor bering, bu blok eng pastda hamma bloklarning tegida joylashishi kerak edi, buni «clear» bilan amalga oshiramiz. Uning uchun «box3» stilini o‘zgartiramiz holos.

.box3 {
width:300px;
height:80px;
border:1px solid red;
background-color:gray;
clear:both;
}

Natija esa, biz kutgan ko‘rinishni berdi.

14css_6

Bu mavzu biroz tushunarsiz bo‘lganligi sababli, yaxshiroq tushunib olishingiz uchun css-tricks.ru saytidan olingan quyidagi rasmlarni ko‘rsataman. Bu rasmlarda saytning strukturasini «float» orqali hosil qilish ko‘rsatilgan.

14css_7

14css_8

14css_9

14css_10