Son zamanlarda bazı web sitesinin kod bakıyordum, ve <div> Her 5 ** bir sınıf olduğunu gördüm.

Hızlı bir Google sonra IE6 için bazen, ama ne öğrendimaslındabu clearfix? Clearfix bir düzen bazı örnekler, clearfix olmadan bir düzen için karşılaştırma verebilir misiniz?

Eğer Internet Explorer 9 desteği veya daha düşük bir ihtiyacın olursa, flexbox serbestçe kullanabilirsiniz, ve düzenleri süzülüyor kullanmaya gerek yok.

Bugün, düzen elemanları süzülüyor kullanımı daha iyi alternatiflerin kullanımı ile cesareti elde ettiğini belirtmekte yarar var.

• display: inline-block - Daha İyi
• Flexbox- En iyi (ama sınırlı tarayıcı desteği)

Flexbox 21, Opera 12.10 ve Internet Explorer 10, Safari 6.1 (Mobil Safari de dahil olmak üzere) ve Android'in varsayılan tarayıcısı Chrome 18, Firefox 4.4 desteklenir.

Tarayıcı için ayrıntılı bir listesini görebilirsiniz: http://caniuse.com/flexbox.

Belki de bu pozisyon tamamen kurulduktan sonra (, öğeleri dışarı atarken kesinlikle önerilen yol olabilir.)

Bir clearfix bir unsur için bir yoldurotomatik olarak alt öğeleri temizleyinek biçimlendirme eklemek gerek yok yani. Genellikle yapımında kullanılırşamandıra düzenleryatay öğeleri yığılmış süzülüyor.

Bu clearfix mücadele için bir yoldurzero-height container problemelemanları süzülüyor

Bir clearfix aşağıdaki gibi yapılır

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Ya da, eğer IE< ihtiyacınız yok ise;8 desteği, şu da olabilir:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Normalde aşağıdaki gibi bir şey yapmak gerekir

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

Clearfix ile, yapmanız gereken yalnızca

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Bu konuda okuyunthis article - by Chris Coyer @ CSS-Tricks