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?

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.

Akıllıca seçin. =)