Clearfix özelliğinin kullanılması, üst öğeyi alt öğeye göre otomatik olarak ayarlayabilir ve ' gibi bazı öznitelikler aracılığıyla bir HTML kodundaki sorunları düzeltebilir. taşma ”, ek işaretlemeler gerektirmeden ebeveyn ve alt öğelerin boyutlarını kontrol eder.
Clearfix Özelliğinin Kullanımı
Bir HTML kod parçacığına bir CSS clearfix özelliği ekleyerek çıktıya ne yaptığını bilmek için clearfix özelliğinin kullanımını anlayalım:
Clearfix Özelliği Olmadan
Clearfix'in çözebileceği türden sorunları anlamak için clearfix özelliğini çalıştırmadan bir kod parçacığı çalıştıralım:
Bir div kapsayıcısına görüntü ekleyen HTML'de bir sınıf oluşturun:
< div sınıf = 'düzeltme' >
< br >< img sınıf = 'resim' kaynak = 'resim.png' her şey = 'resim' Genişlik = '250' yükseklik = '180' >
Metin...
< / div >
Yukarıdaki HTML için CSS kodu aşağıdadır:
.temizleme {
sınır : 3 piksel sağlam #2baa12 ;
dolgu malzemesi : 5 piksel ;
}
.img {
batmadan yüzmek : sol ;
}
Bu, çıktıyı, görüntüyü içeren alt sınıfın kabın dışına taşacağı şekilde üretecektir. Bu gibi durumlarda, bu sorunu kolayca gidermek veya düzeltmek için clear fix özelliği kullanılabilir:
Clearfix Özelliği ile
Sorunu çözmek için basitçe bir tane ekleyebiliriz. taşma eşit değere sahip öznitelik Oto bu, ana kabı alt öğenin boyutuna göre ayarlayacaktır:
.temizleme {
sınır : 3 piksel sağlam #2baa12 ;
dolgu malzemesi : 5 piksel ;
}
.temizleme {
taşma : Oto ;
}
.img {
batmadan yüzmek : sol ;
}
İşte bu kod parçacığında, ana sınıf kapsayıcıdır ve resim, alt sınıfına eklenir:
< div sınıf = 'düzeltme' >< br >< img sınıf = 'resim' kaynak = 'resim.png' her şey = 'resim' Genişlik = '250' yükseklik = '180' >
Metin...
< / div >
Bir clearfix özelliği eklemek, üst öğeyi (kapsayıcı), eklenen resim olan alt öğenin boyutuna göre otomatik olarak genişletir:
HTML'deki bir Clearfix özelliği bu şekilde çalışır.
Çözüm
Clearfix özelliği, HTML'deki alt öğeleri, ek işaretlemeler gerektirmeden basit bir clearfix özelliğiyle üst öğelere göre ayarlamak için kullanılır. CSS Clearfix'i kullanmak, üst öğelerin boyutlarını alt öğelerin boyutlarına göre ayarlamak için artırır veya azaltır.