.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

1. Neden display:block kullanarak
2. Ayrıca,neden bunu da ::before pseudo için geçerlidir

.clearfix less/mixins.less olarak tanımlanır. Doğru tanımı yukarıda, bu makale için bir bağlantı içeren bir yorum:

A new micro clearfix hack

Bu makalede, nasıl çalıştığını açıklar.

GÜNCELLEME:Evet, link-tek cevap kötü. Bu cevap yazdım bu da biliyordum, ama kopyalama ve yapıştırma telif hakları, intihal nedeniyle OK gibi, ve ne hissettiğini bilmiyordum. Ancak, ben şimdi özgün makale bağlantılı beri sorun yok gibi hissediyorum. Ayrıca yazarın adı, ama belirtmeliyim, kredi için: Nicolas Gallagher. Burada makale (not "Thierry yöntemi" 23**) dir: . Bu et

Bu clearfix” pseudo-elementleri oluşturur ve kendi ayarlar “mikro table display. Bu anonymous table-cell ve bir bir oluşturur yeni blok :before anlamına gelen biçimlendirme bağlamında pseudo-element üst kenar boşluğu çökmesi engeller. :after pseudo-element için kullanılır bu yüzen temizleyin. Sonuç olarak, herhangi oluşturulan saklamaya gerek yok içerik ve kod miktarı ihtiyaç azalır.

:before seçici içerirdeğiltemizlemek için gerekli yüzer, amaengellerüst-kenar boşlukları modern çöken tarayıcılar. Bu her iki tarafında da vardır

• Yeni blok biçimlendirme bir bağlamda, örneğin,oluşturun diğer şamandıra muhafaza teknikleri ile görsel tutarlılık sağlar overflow:hidden

• zoom:1 uygulandığında IE 6/7 ile görsel tutarlılık sağlar.

N. B.: IE 6/7 yeni bir blok içerik biçimlendirme içinde yüzen alt kenar boşluklarını içermez durumlar vardır. Daha fazla bilgi burada bulunabilir: Better float containment in IE using CSS expressions.

content:" " (içerik dizesinde Not alanı) kullanımını önler bir, eğer clearfixed unsurları etrafında boşluk yaratır 26* * contenteditable da, mevcut HTML içinde bir yerlerde bağlıyor. Sergio sayesinde bu düzeltme tespit için Cerrutti. Alternatif bir düzeltme. font:0/0 a kullanın.

Eski Firefox

Firefox < 3.5 ile Thierry yöntemi kullanarak yararlanacaktır eklenen karakter gizlemek için visibility:hidden eklenmesi. Bu Firefox eski sürümleri content:"." kaçınmak gerekir çünkü. body ve ilk alt öğesi arasında görünen boşluk, belirli koşullar (örneğin,*. örneğin* 27)

Alternatif çevreleme şamandıra yeni bir blok oluşturma yöntemleri ya da içerik, overflow:hidden uygulama gibi biçimlendirme Kapsayıcı öğe display:inline-block de bunu önlemek olacaktır Firefox'un eski sürümlerinde davranış.