clearfix

Yüzerleri temizlemek için yalnızca .clearfix ana öğeye ekleyerek kolayca gerçekleştirebilirsiniz. Ayrıca bir mixin olarak da kullanılabilir.

bilgi

Clearfix, yüzer öğelerin etrafında düzeni korumak için kullanılır ve bazı durumlarda gereklidir.

HTML'de kullanın:

<div class="clearfix">...</div>

Mixin kaynak kodu:

SCSS'de mixin kullanmak:

.element {
  @include clearfix;
}

Aşağıdaki örnek clearfix'in nasıl kullanılacağını göstermektedir. Clearfix olmadan sarıcı div butonların etrafında genişlemez ve bu da bozuk bir düzen oluşturur.

ipucu

Clearfix kullanarak, sınıf ekleyerek yüzer öğelerin etrafında düzen bozukluğunu önleyebilirsiniz.

Örnek Buton sola yüzer Örnek Buton sağa yüzer

not

Bu örnek, clearfix sınıfının kullanımıyla düzenin nasıl düzeltildiğini göstermektedir.