Üretilen tasarıma bağlı olarak, aşağıdaki açık CSS çözümlerinin her birinin kendi faydaları vardır.
Clearfix'in yararlı uygulamaları var, ancak bir saldırı olarak da kullanılıyor. Bir clearfix kullanmadan önce belki bu modern css çözümleri faydalı olabilir:
Modern Clearfix Çözümleri
Konteyner overflow: auto;
Kayan öğeleri temizlemenin en basit yolu overflow: auto, içeren öğenin stilini kullanmaktır . Bu çözüm tüm modern tarayıcılarda çalışır.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Dış öğe üzerinde belirli kenar boşluğu ve dolgu kombinasyonlarının kullanılması bir dezavantaj, kaydırma çubuklarının görünmesine neden olabilir, ancak bu, kenar boşluğu ve dolgu malzemesinin başka bir ebeveyn içeren öğeye yerleştirilmesiyle çözülebilir.
'Taşma: gizli' kullanmak da bir temizleme çözümüdür, ancak kaydırma çubukları olmayacaktır, ancak kullanımı hiddeniçeren öğenin dışında konumlandırılmış herhangi bir içeriği kırpacaktır .
Not: Kayan öğe imgbu örnekteki bir etikettir, ancak herhangi bir html öğesi olabilir.
Clearfix Yeniden Yüklendi
CSSMojo'daki Thierry Koblentz şunu yazdı: En son temizleme düzeltmesi yeniden yüklendi . EskiIE'ye destek bırakarak, çözümün bir css deyimiyle basitleştirilebileceğini belirtti. Ek olarak, display: block(yerine display: table) kullanılması , clearfix öğelerine kardeş olduğunda kenar boşluklarının düzgün bir şekilde daraltılmasına izin verir.
.container::after {
content: "";
display: block;
clear: both;
}
Bu, düzeltmenin en modern sürümüdür.
⋮
⋮
Eski Clearfix Çözümleri
Aşağıdaki çözümler modern tarayıcılar için gerekli değildir, ancak eski tarayıcıları hedeflemek için yararlı olabilir.
Bu çözümlerin tarayıcı hatalarına bağlı olduğunu ve bu nedenle yalnızca yukarıdaki çözümlerin hiçbiri sizin için işe yaramadığında kullanılması gerektiğini unutmayın.
Kabaca kronolojik sırada listelenmiştir.
Modern tarayıcılar için bir düzeltme olan "Beat That ClearFix"
CSS Mojo'dan Thierry Koblentz ', modern tarayıcıları hedeflerken artık zoomve ::beforeözelliğini / değerlerini bırakabileceğimizi ve şunları kullanabileceğimizi belirtti:
.container::after {
content: "";
display: table;
clear: both;
}
Bu çözüm IE 6/7… 'yi bilerek desteklemez!
Thierry ayrıca şunları sunar: " Dikkatli bir kelime : sıfırdan yeni bir projeye başlarsanız, devam edin, ancak şu anda sahip olduğunuz teknikle bu tekniği değiştirmeyin, çünkü oldIE'yi desteklemeseniz bile, mevcut kurallarınız marjları daraltmak. "
Mikro Temizleme
En yeni ve küresel olarak benimsenen bir düzeltme çözümü olan Nicolas Gallagher tarafından üretilen Micro Clearfix .
Bilinen destek: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Taşma Özelliği
Bu temel yöntem, konumlandırılmış içerik kabın sınırları dışında gösterilmeyeceği zamanki durum için tercih edilir.
http://www.quirksmode.org/css/clearing.html
- bu teknikle ilgili sık karşılaşılan sorunların, yani width: 100%kapsayıcıda nasıl çözüleceğini açıklar .
.container {
overflow: hidden;
display: inline-block;
display: block;
}
displayIE için "hasLayout" ayarlamak için özelliği kullanmak yerine , bir öğe için "hasLayout" u tetiklemek için diğer özellikler kullanılabilir .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
overflowÖzelliği kullanarak şamandıraları temizlemenin başka bir yolu , alt çizgi kesmek kullanmaktır . IE, alt çizgi ile önek değerleri uygular, diğer tarayıcılar uygulamaz. zoomMülkiyet tetikler hasLayout IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Bu çalışırken ... kesmek kullanmak ideal değildir.
PIE: Kolay Temizleme Yöntemi
Bu daha eski "Kolay Temizleme" yöntemi, konumlandırılmış elemanların daha zor CSS pahasına konteynerin sınırları dışına asılmasına izin verme avantajına sahiptir.
Bu çözüm oldukça eskidir, ancak Pozisyon Her Şeyde Kolay Temizleme hakkında her şeyi öğrenebilirsiniz: http://www.positioniseverything.net/easyclearing.html
"Clear" özelliğini kullanan öğe
Birlikte hızlıca tokat atmak için hızlı ve kirli çözüm (bazı dezavantajları olan):
<br style="clear: both" /> <!-- So dirty! -->
Dezavantajları
- Duyarlı değildir ve bu nedenle düzen stilleri medya sorgularına göre değişirse istenen etkiyi sağlamayabilir. Saf CSS'de bir çözüm daha idealdir.
- Herhangi bir anlamsal değer eklemeden html işaretlemesi ekler.
- Css'de bir “clearfix” in tek bir çözümüne sınıf referansı ve html'de buna sınıf referansları yerine her örnek için satır içi tanım ve çözüm gerektirir.
- Etrafında çalışmak için daha fazla kesmek yazmak zorunda kalabileceğinden, kod başkalarıyla birlikte çalışmayı zorlaştırır.
- Gelecekte başka bir temizleme çözümüne ihtiyaç duyduğunuzda / kullanmak istediğinizde, geri dönüp
<br style="clear: both" />işaretlemenin etrafında kalan her etiketi kaldırmanız gerekmeyecektir .
