Süzən elementlər

7.1 Float xüsusiyyəti

float və clear xüsusiyyətlərindən istifadə edərək süzən elementlər veb dizaynda mürəkkəb layoutlar yaratmaq üçün ilk metodlardan biri idi. Hərçənd ki, Flexbox və Grid kimi müasir metodlar çox vaxt üstünlük təşkil edir, lakin float və clear-dən istifadəni bilmək köhnəlmiş layihələrlə işləmək və ya CSS-in əsaslarını anlamaq üçün hələ də vacibdir.

Float xüsusiyyəti

float xüsusiyyəti elementin sola və ya sağa "süzməsinə", mətn və digər elementlərlə əhatə olunmasına imkan yaradır. Bu xüsusiyyət, xüsusilə sütunlarla layoutlar yaratmaq və mətni şəkillərlə əhatə etmək üçün faydalıdır.

Syntax:

    
      .element {
        float: left; /* və ya right */
      }
    
  

float xüsusiyyətinin dəyərləri:

• left: element sola süzür və sonrakı elementlər onu sağdan əhatə edir
• right: element sağa süzür və sonrakı elementlər onu soldan əhatə edir
• none: default dəyər, element süzmür
• inherit: parent elementdən dəyəri irs alır

Float istifadəsinə nümunə:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Sola Süzmə</div>
      <div class="float-right">Sağa Süzmə</div>
      <div class="content">
        <p>Bu, süzülən elementlər ətrafında dolanan bir məzmundur. Sol süzülən element sola yerləşdiriləcək, sağ süzülən element isə sağa yerləşdiriləcək.</p>
      </div>
    
  

7.2 clear xassəsi

clear xassəsi süzən elementlərin əhatələmə davranışını idarə etmək üçün istifadə olunur. Bu, elementi müəyyən tərəfdən süzən elementlərin əhatəsindən qorumağa imkan verir.

Sintaksis:

    
      .element {
        clear: left; /* ya da right */
      }
    
  

clear xassəsinin dəyərləri:

• left: element soldan süzülməyəcək
• right: element sağdan süzülməyəcək
• both: element nə soldan, nə də sağdan süzülməyəcək
• none: ilkin dəyər, element hər iki tərəfdən süzülür

clear xassəsinin istifadəsinə nümunə:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Sol Süzücü</div>
      <div class="float-right">Sağ Süzücü</div>
      <div class="clear">Süzülməmiş Element</div>
      <div class="content">
        <p>Bu məzmun süzən elementlərin ətrafında yerləşməyəcək, çünki yuxarıda süzülməmiş element var.</p>
      </div>
    
  

"clearfix" texnikasına nümunə:

    
      .container::after {
        content: "";
        display: table;
        clear: both;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Yan Panelin Məzmunu</div>
        <div class="main">Əsas Məzmun</div>
      </div>
    
  

7.3 Float istifadə etmənin üstünlükləri və mənfi cəhətləri

Üstünlükləri

1. Sadə istifadə:
   • float ilə sadə layout'lar yaratmaq asandır
2. Brauzerlərdə geniş dəstək:
   • float bütün müasir brauzerlərdə, o cümlədən köhnə versiyalarda dəstəklənir
3. Layout'larda elastiklik:
   • Mətnin şəkillərin ətrafından axması və çoxsətirli layout'lar daxil olmaqla müxtəlif layout'lar yaratma imkanı

Mənfi cəhətləri

1. Mürəkkəb layout'ları idarə etməkdə çətinliklər:
   • float, xüsusilə şaquli hizalanma tələb edildikdə mürəkkəb layout'ların yaradılmasında problemlər yarada bilər
2. Valideyn elementlərin hündürlüyü ilə problemlər:
   • Əgər bütün övlad elementlər "süzən"dirsə, valideyn elementlər "çökə" bilər. Bunu düzəltmək üçün clearfix kimi texnikalardan istifadə tələb olunur
3. Köhnəlmə:
   • Flexbox və Grid kimi müasir metodlar daha güclü və elastik layout yaratma üsulları təklif edir

Float və clear ilə layout yaratma nümunəsi

Float və clear istifadə edərək ikisütunlu layout yaratmaq.

Bu nümunədə yan panel (.sidebar) və əsas məzmunlu (.main) ikisütunlu layout yaradılır. .sidebar və .main elementləri sola "üzür", .footer elementi isə clear: both; ilə axmağın qarşısını alır.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Yan Panel Məzmunu</div>
        <div class="main">Əsas Məzmun</div>
        <div class="footer">Altlıq Məzmunu</div>
      </div>
    
  

float və clear müasir metodların yaranmasına baxmayaraq veb inkişaf etdiricilərin alətlər dəstində vacib vasitə olaraq qalır. Onların iş prinsipini başa düşmək köhnə layihələrin dəstək və yenilənməsinə, həmçinin sadə layout'ların yaradılmasına kömək edir. Daha mürəkkəb və adaptiv layout'ların yaradılması üçün isə müasir metodlar kimi Flexbox və Grid daha çox üstünlük təşkil edir, amma float və clear bilikləri hələ də aktualdır.