Hansı clearing metodlarını bilirsiniz və hansı vəziyyətlərdə tətbiq olunur?

Axınların qarşısını alma metodları:

• clear: left; — solda axını qarşısını alır. Element solda axan elementlərlə yan-yana yerləşməməlidirsə tətbiq olunur.
• clear: right; — sağda axını qarşısını alır. Element sağda axan elementlərlə yan-yana yerləşməməlidirsə tətbiq olunur.
• clear: both; — hər iki tərəfdə axını qarşısını alır. Element hər hansı bir axan elementlə yan-yana yerləşməməlidirsə tətbiq olunur. Bu ən çox istifadə olunan variantdır.
• clear: none; (varsayılan dəyər) — axını icazə verir.

Tətbiqlər:

• Valideyn konteynerin "çökməsinin" qarşısını almaq üçün: Əgər valideynin bütün uşaqları (float olanlar) bir-birinə axırsa, valideyn konteynerin hündürlüyü itir və çökməyə başlayır. Valideyn daxilində axan elementlərdən sonra clear: both; əlavə etmək və ya ::after pseudo-elementindən istifadə etmək bu problemi həll edir.
• Axan elementlərdən sonra düzgün yerləşdirmə üçün: Əgər adi (axmayan) elementlər axanların altında yerləşməlidirsə və yan-yana olmamalıdırsa.
• Axan layoutlarda "sətirlər" və ya "xətlər" yaratmaq üçün: Əgər float ilə olan elementlər bir neçə sətirə düzülməlidirsə, clear yeni sətirə başlamaq üçün istifadə olunur.

Pseudo-element ::after istifadə edərək təmizləmə nümunəsi:

.clearfix::after {
  content: ""; /* Pseudo-elementin göstərilməsi üçün vacib */
  display: table; /* və ya block */
  clear: both; /* Əsas xüsusiyyət təmizləmə üçün */
}

Bu clearfix sinfi, float olan uşaqlarını ehtiva edən valideyn elementə tətbiq olunur.