Hansı axınların bağlanması (clearing) metodlarını bilirsiniz və hansı vəziyyətlərdə tətbiq olunur?

• overflow: hidden; və ya overflow: auto;: Bu, float ilə olan element(lar)ın valideyn elementinə tətbiq olunur. Yeni bir blok formatlama konteksti (BFC) yaradır və valideynin ətrafındakı elementləri öz hündürlüyünə daxil edir.

Vəziyyət: Elementin sərhədlərindən kənara çıxan məzmunu gizləmək və ya sürüşdürmə tətbiq etmək üçün ən sadə üsul, həm də təmizləmə üsulu kimi işləyir.

• clear: both;: Bu, float ilə əhatə olunmayan əvvəlki elementləri əhatə etməməli olan elementə tətbiq olunur. Bu element bütün ətrafındakı elementlərin altında yerləşəcək.

Vəziyyət: Bir-birini əhatə edən elementlərdən sonra yeni sətir və ya bölmə yaratmaq istəndikdə.

• clearfix metodu (pseudo-elementlər ::after): Xüsusi xüsusiyyətlərə malik pseudo-element əlavə edir, clear: both; davranışını təqlid edir, lakin əlavə HTML elementləri əlavə etməyə ehtiyac qalmır.

.clearfix::after {
    content: ""; /* Pseudo-elementi göstərmək üçün zəruri məzmun */
    display: table; /* Yeni blok kontekstini yaradır, overflow: hidden kimi */
    clear: both; /* Təmizləməni tətbiq edir */
}

Vəziyyət: Ən çox istifadə olunan və tövsiyə olunan təmizləmə üsulu, təmizdir və markup quruluşunu pozmur. Ətrafındakı elementləri əhatə edən valideyn elementə tətbiq olunur.

• display: flex və ya display: grid istifadəsi: Müasir layout metodları, elementlərin yerləşdirilməsi üçün əhatə etməyə ehtiyac olmadan, beləliklə təmizləməyə ehtiyac qalmır. Vəziyyət: Çətin layoutların qurulması və ya elementlərin yerləşdirilməsinə daha çevik nəzarət lazım olduqda.

• clear: both; ilə əlavə element əlavə etmək (köhnə üsul): Boş HTML elementi əlavə edir və ona clear: both; tətbiq edir. Vəziyyət: Bu, köhnəlmiş və arzuolunmaz yanaşma hesab olunur, çünki artıq HTML əlavə edir.