Düzeltme nedir?

Son zamanlarda bazı web sitelerinin kodlarına bakıyordum ve her birinin <div> bir sınıfı olduğunu gördüm clearfix.

Hızlı bir Google aramasından sonra, bazen IE6 için olduğunu öğrendim, ancak aslında bir düzeltme nedir?

Temizlenmemiş bir düzene kıyasla, temizlenmiş bir düzene ilişkin bazı örnekler verebilir misiniz?

IE9 veya daha düşük bir sürümü desteklemeniz gerekmiyorsa, flexbox'ı özgürce kullanabilirsiniz ve kayan düzenler kullanmanıza gerek yoktur.

Bugün, yerleşim için yüzer elemanların kullanımının daha iyi alternatiflerin kullanımı ile gittikçe daha cesaret kırıldığını belirtmek gerekir.

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

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

Ayrıntılı bir tarayıcı listesi için bkz . Https://caniuse.com/flexbox .

(Belki de pozisyonu tamamen kurulduktan sonra, öğeleri döşemenin kesinlikle tavsiye edilen yolu olabilir.)

Bir düzeltme, bir öğenin alt öğelerini otomatik olarak temizlemesinin bir yoludur , böylece ek işaretleme eklemenize gerek kalmaz. Genellikle elemanların yatay olarak istiflenmesi için yüzer şamandıra düzenlerinde kullanılır .

Temizleme, kayan elemanlar için sıfır yükseklik konteyner sorunuyla mücadele etmenin bir yoludur

Bir temizleme 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;
}

Veya IE <8 desteğine ihtiyacınız yoksa, aşağıdakiler de iyidir:

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

Normalde aşağıdaki gibi bir şey yapmanız gerekir:

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

Clearfix ile sadece aşağıdakilere ihtiyacınız vardır:

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

Bu makalede bunu okuyun - Chris Coyer @ CSS-Tricks tarafından

Diğer cevaplar doğrudur. Ama şunu eklemek istiyorum ki, insanların ilk olarak CSS öğrendikleri ve floattüm düzenlerini kötüye kullandıkları zamanın bir kalıntısı . floatuzun metnin yanında şamandıra görüntüleri gibi şeyler yapmak içindir, ancak birçok kişi bunu birincil düzen mekanizması olarak kullandı. Bunun için gerçekten amaçlanmadığı için, çalışması için "clearfix" gibi saldırılara ihtiyacınız var.

Bugünlerde display: inline-block(sağlam bir alternatiftir IE6 ve IE7 hariç daha modern tarayıcılar vb flexbox'a, ızgara düzeni gibi isimler altında daha da yararlı düzen mekanizmaları ile geliyor rağmen,)

clearfixBir kap onun süzülüyor çocukları sarılmasına izin verir. Bir clearfixveya eşdeğer bir stil olmadan , bir kap yüzer çocuklarının etrafına sarılmaz ve yüzer çocukları tamamen konumlandırılmış gibi çöker.

Net düzeltmenin birkaç sürümü vardır, Nicolas Gallagher ve Thierry Koblentz anahtar yazarlar olarak.

Eski tarayıcılar için destek istiyorsanız, bu düzeltmeyi kullanmak en iyisidir:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

SCSS'de aşağıdaki tekniği kullanabilirsiniz:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Eski tarayıcıları desteklemeyi umursamıyorsanız, daha kısa bir sürüm vardır:

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

2017 yılının 2. çeyreğinde durum hakkında bir güncelleme sunmak.

Firefox 53, Chrome 58 ve Opera 45'te yeni bir CSS3 görüntüleme özelliği bulunmaktadır .

.clearfix {
   display: flow-root;
}

Herhangi bir tarayıcının kullanılabilirliğini buradan kontrol edin: http://caniuse.com/#feat=flow-root

(Display özelliği flow-root olarak ayarlanmış) öğe bir blok konteyner kutusu oluşturur ve içeriğini akış düzenini kullanarak düzenler. İçeriği için her zaman yeni bir blok biçimlendirme bağlamı oluşturur.

Yani, bir veya birkaç yüzen çocuk içeren bir üst div kullanırsanız, bu özellik üst öğenin tüm çocuklarını kapsadığından emin olur. Herhangi bir temizleme düzeltmesine gerek kalmadan. Herhangi bir çocukta, hatta son bir kukla öğede (daha önce son çocuklarda olan clearfix varyantını kullanıyorsanız).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

Basitçe söylemek gerekirse, clearfix bir hack'tir .

Yüzen çocuk elemanlarının ebeveynlerini taşmamasını sağlamanın tek makul yolu olduğu için hepimizin yaşaması gereken çirkin şeylerden biridir. Orada başka düzen şemaları var ama yüzen web tasarım / geliştirme bugün clearfix kesmek değerini göz ardı etmek için çok yaygın.

Ben şahsen Micro Clearfix çözümüne (Nicolas Gallagher) yaslandım

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

referans

CSS float tabanlı mizanpajlarda yaygın olarak kullanılan bir teknik, kayan elemanlar içereceğini bildiğiniz bir öğeye bir avuç CSS özelliği atamaktır. Yaygın olarak adlandırılan bir sınıf tanımı kullanılarak uygulanan teknik clearfix(genellikle) aşağıdaki CSS davranışlarını uygular:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

Bu birleşik davranışların amacı :after, aktif elemanı tek bir 'içeren' bir kap oluşturmaktır . önceden var olan tüm kayan reklamları temizleyecek ve bir sonraki içerik için sayfayı etkili bir şekilde sıfırlayacak gizli olarak işaretlenmiştir.

Bir temizleme elde etmek için diğer (ve belki de en basit) seçenek overflow:hidden;içeren öğede kullanmaktır. Örneğin

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

Tabii ki bu sadece içeriğin asla taşmasını istemediğiniz durumlarda kullanılabilir.

Kabul edilen cevabı denedim ancak içerik hizalama ile ilgili hala bir sorunum vardı. Aşağıda gösterildiği gibi ": önce" seçicisinin eklenmesi sorunu çözdü:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

Yukarıdaki LESS, aşağıdaki CSS ile derlenecektir:

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

Farklı bir yöntem aynı şey ama biraz farklı

fark, \00A0== ile değiştirilen içerik noktasıdırwhitespace

Bu http://www.jqui.net/tips-tricks/css-clearfix/ hakkında daha fazla bilgi

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

İşte bunun kompakt bir versiyonu ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}