Hangi yöntemin ‘clearfix’ iyi?
Asırlık div
Bir sarma sorunu bir iki sütun düzeni var. Benim Kenar Çubuğu süzülüyor, benim kap div
içerik ve Kenar Çubuğu sarmak için başarısız olur.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
FF açık hatayı düzeltmekten çok sayıda yöntem var:
<br clear="all"/>
overflow:auto
overflow:hidden
- vb.
Ama benim durumumda, düzgün görünüyor sadece biraz dağınık olan <br clear="all"/>
çözüm vardır. overflow:auto
beni kötü kaydırma çubukları verir, overflow:hidden
kesinlikle yan etkisi olmalı.
Ayrıca, IE 7 görünüşe göre bu sorun, yanlış davranışı yüzünden acı çekmek değil gerekiyor, ancak benim durumda FF aynı acı.
Ne en güvenilir ve en iyi uygulama yöntemi, şu anda bize mevcut?
CEVAP
Tasarım üretilen bağlı olarak, aşağıda clearfix css çözümlerin her biri kendi yararları vardır.
"Beat ClearFix" clearfix modern tarayıcılar için
Thierry Koblentz CSS Mojo modern tarayıcılar gösterirken olduğuna işaret eden’, şimdi zoom
::before
/özellik değerleri ve kullanımı basit bırakabiliriz:
.container:after {
content:"";
display:table;
clear:both;
}
Bu çözüm destek için 6/7 ...bilerek IE değil!
Thierry de bulunmaktadır: "A word of caution: eğer yeni bir proje sıfırdan vazgeçme, ama sakın takas bu teknik ile tek başına şimdi, çünkü olsa bile değilsiniz destek ihtiyar, mevcut kuralları önlemek çöken kenar boşlukları."
Mikro Clearfix
En son ve küresel olarak kabul clearfix çözüm Micro Clearfix by Nicolas Gallagher.
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Taşma Özelliği
Bu temel yöntem dışında konumlandırılmış içerik kabın sınırlarını göstermez zaman olağan durum, tercih edilir.
http://www.quirksmode.org/css/clearing.html
-ortak sorunlar bu teknik ile ilgili nasıl çözüleceği, yani kap width: 100%
ayarı açıklıyor.
.container {
overflow: hidden;
display: inline-block; /* Necessary to trigger "hasLayout" in IE */
display: block; /* Sets element back to block */
}
display
özelliği "" YANİ, diğer özellikler trigering "hasLayout" for an element için kullanılabilir. hasLayout ayarlamak için kullanmak yerine
.container {
overflow: hidden; /* Clearfix! */
zoom: 1; /* Triggering "hasLayout" in IE */
display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}
Yüzer overflow
özelliğini kullanarak temizlemek için başka bir yol underscore hack kullanmaktır. YANİ değerler alt çizgi, diğer tarayıcılarda olmaz ile öneki geçerli olacaktır. zoom
özellik IE hasLayout tetikleyiciler:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Bu işleri yaparken... idealdir.
"sonra" Pseudo-element
Bu "Temizleme" yöntemi daha zor CSS pahasına konteyner sınırları dışında asmak için konumlandırılmış öğeler izin verme avantajına sahiptir. Kolay eski
http://www.positioniseverything.net/easyclearing.html
.container {
display: inline-block;
}
.container:after {
content: " ";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.container {
display: block;
}
Eleman "" özelliği . net kullanarak
Hızlı ve kirli çözüm:
<br style="clear:both" /> <!-- So dirty! -->
Takas unsuru çözümü kullanarak birçok sebep için ideal değildir:
- ana nedeni: biçimlendirme sunum koyuyorsun. Bu aynı biçimlendirme kullanıldığı başka bir bağlamda
<br>
tarzı istemezsin diye yeniden biçimlendirme daha zor hale getirir. CSS aynı biçimlendirme farklı bağlamlarda farklı stili kullanılmalıdır. - biçimlendirme herhangi bir anlamsal değer katmıyor,
- kod un profesyonel bir görünüm sağlar, ve
- diğer clearfix çözümler çıktığında gelecekte geri dönün ve biçimlendirme etrafa saçılmış olan
<br>
tüm etiketleri kaldırmak zorunda kalmazsınız.
Hangi yöntemin daha iyi gerçekleştirir...
Bash bir komut hangi dizin olduğunu�...
'' Windows komut satırında h...
Hangi karakter CSS sınıf isimleri/seçi...
Hangi MySQL boolean değerleri saklamak...