Float

float xüsusiyyəti elementin (img, table, div və s.) yerini (sağa və ya sola) təyin etmək üçün istifadə edilir. Bir elementə float:left dəyəri versəniz, həmin element sol çəkiləcək, digər elementlər o elementin sağından yerləşəcəkdir. Bu HTML3,2-dəki şəkilə (img) tətbiq olunan align="left" və align="right" ilə eyni xüsusiyyətdir. Ancaq CSS ondan fərqli olaraq bütün elementlərə float xüsusiyyəti verməyinizi təmin edir. float xüsusiyyəti CSS ilə cədvəlsiz (table olmadan) veb sayt yaratmaq metodunun ən əhəmiyyətli elementlərindən biridir.

Quruluşu: float: <dəyər>
Aldığı dəyərlər: left | right | none | inherit
Başlanğıc dəyəri: none
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
 
left - tətbiq olunan elementi sol tərəfə çəkir, digər elementlər onun sağından yerləşir
right - tətbiq olunan elementi sağa çəkir, digər elementlər onun solundan yerləşir
none - tətbiq olunan elementi öz əvvəlki vəziyyətində saxlayır
inherit - Valideyn (üst element) elementin dəyərini alır
 
Nümunəyə baxaq:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .layer1 {
    float: left; /* Sol tərəfdə yerləşdirmək üçün */
    background: #fd0; /* Arxa fon rəngi */
    border: 1px solid black; /* Çərçivə parametrləri */
    padding: 10px; /* Mətn ətraflı boşluq */
    margin-right: 20px; /* Sağdan boşluq */
    width: 40%; /* Blokun eni */
   }
  </style>
 </head> 
 <body> 
  <div class="layer1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div>
   Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
   feugat nulla facilisi.
  </div>
 </body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir.
 

float

 
Şəkildən də göründüyü kimi, fon rəngi verdiyimiz elementi sola çəkdik, nəticədə digər div elementi onun sağ tərəfində yerləşmiş oldu.
Nəticəyə bu linkdən də baxa bilərsiniz.
CSS3