Hansı axın qadağası (clearing) metodlarını bilirsiniz və harada tətbiq olunur?

• clear: both;: Ən yaygın və etibarlı metod. Əvvəlki bütün üzən elementlərin altına yerləşdirilməli olan elementə tətbiq olunur. Bu, ayrıca boş element və ya layout elementlərindən biri ola bilər.
• clear: both; ilə boş element əlavə etmək: Bəzən, xüsusən mürəkkəb layoutlarda, axını təmin etmək üçün istifadə olunur. Bu, boş div və ya başqa blok elementidir.
• Pseudo-element :after ilə clear: both;: Daha müasir yanaşma. Üzən elementlərin konteynerinə tətbiq olunur. Konteynerin son məzmunundan sonra "virtual" element yaradır və beləliklə daxili axını sıfırlayır.

/* :after pseudo-element istifadəsi nümunəsi */
.container::after {
  content: ""; /* Pseudo-elementlər üçün vacib xüsusiyyət */
  display: table; /* Daha yaxşı uyğunluq üçün tez-tez istifadə olunur */
  clear: both;
}

• overflow: hidden; və ya overflow: auto;: Üzən elementləri ehtiva edən konteynerə tətbiq olunur. Yeni blok formatlama kontekstini yaradır və daxili axını "təmizləyir". Ancaq, bu, məzmunu kəsə və ya kaydırma çubuqları yarada bilər, əgər məzmun konteyner sərhədlərindən çıxarsa.
• Blok formatlama konteksti (BFC): Yuxarıdakı bütün metodlar, açıq şəkildə boş element istisna olmaqla, hər hansı bir şəkildə yeni BFC yaradır və bu, axını sıfırlayır. BFC yaradan xüsusiyyətlər:
  • float (sıfır olmayan dəyər)
  • overflow (visible-dən fərqli dəyər)
  • display: inline-block
  • position: absolute və ya fixed
  • display: flow-root; (yeni, açıq şəkildə BFC yaradır)

Metodların müqayisəli cədvəli:

Metod	Tətbiq olunan element	Axını sıfırlama üsulu	Potensial problemlər
clear: both;	Element	Açıq sıfırlama	Əlavə element
Boş element + clear	Boş element	Açıq sıfırlama	Əlavə element
:after + clear	Konteyner	Pseudo-element	Başlayanlar üçün daha çətindir
overflow: hidden/auto;	Konteyner	BFC yaratmaq	Kəsilmə / kaydırma çubuqları
Digər xüsusiyyətlə BFC yaratmaq	Konteyner	BFC yaratmaq	İstənməyən yan təsirlər
display: flow-root;	Konteyner	Açıq BFC yaratmaq	Köhnə brauzerlərdə dəstək məhduddur

Tətbiq sahələri:

• Üzən elementlərdən sonra gələn elementin onların altında göstərilməsini təmin etmək.
• Yalnız üzən elementlər ehtiva edən konteynerin hündürlüyünün çökməməsini təmin etmək.
• Mürəkkəb layoutlarda sənəd axını üzən elementlər ətrafında idarə etmək.