Şəkilin ətrafında mətnin axışını necə ləğv etmək olar?

CSS float ilə tətbiq olunan şəkil ətrafında mətn axınını ləğv etmək üçün aşağıdakı metodlardan istifadə edə bilərsiniz:

1. clear xüsusiyyəti: Bu, şəkildən sonra gələn elementə tətbiq olunur. Bu, hansı tərəfdə axının qadağan olunduğunu müəyyən edir.

   • clear: left; - solda axını ləğv edir.
   • clear: right; - sağda axını ləğv edir.
   • clear: both; - hər iki tərəfdə axını ləğv edir.

   Məsələn:

   <img src="image.jpg" style="float: left;">
   <p>Bu mətn şəkli əhatə edəcək.</p>
   <div style="clear: both;"></div> <!-- Bu element axını ləğv edəcək --></p>
   

   /* Alternativ CSS-də */
   .clearing-element {
     clear: both;
   }
   

   clear: both; tətbiq etmək, bu element və ondan sonrakı bütün elementlərin şəkilin altında başlamasını təmin edir.

2. overflow xüsusiyyəti: Bu, həm float şəkil, həm də mətn ehtiva edən valideyn konteynerə tətbiq olunur.

   • overflow: hidden;
   • overflow: auto;

   Bu dəyərlər yeni bir blok formatlama kontekstini (BFC) yaradır, bu da içindəki float elementləri "əhatə edir".

   Məsələn:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Bu mətn şəkil ətrafında olacaq.</p>
   </div>
   

   .container {
     overflow: hidden; /* və ya auto */
   }
   

   Bu metod daha təmizdir, çünki əlavə element əlavə etməyə ehtiyac yoxdur.

3. display: block; tətbiq etmək və margin istifadə etmək: Əgər şəkilin əvvəlcədən float olmasını istəmirsinizsə, sadəcə float tətbiq etməyin. display: block; və margin ilə yerləşdirmə edin.

   img {
     display: block; /* Şəkil bütün genişliyi tutacaq */
     margin-bottom: 20px; /* Mətn üçün aşağı boşluq */
   }
   

Metod seçimi, konkret vəziyyətə və istənilən davranışa bağlıdır. clear ən universal üsuldur və müəyyən bir elementdən sonra axını ləğv edir, overflow isə öz-özünü təmizləyən konteynerlər yaratmaq üçün faydalıdır.