Yeni Mikro Clearfix Hack Yöntemi

Clearfix’e sıkça ihtiyaç duyuyoruz. Malum eskiden kalma clearfix hack yöntemlerimiz biraz daha fazla satır ve fazla kod gerektiriyor.

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix {
    display: inline-block;
}
/* start commented backslash hack */ *
html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* close commented backslash hack */

Aşağıda vereceğim yeni micro kod ile aynı işi daha az satır kodla görebilirsiniz. IE 6-7‘yi görmezden geliyorsanız en alttaki satırı silebilirsiniz.

.cf:before,

.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/*For IE 6/7 only*/

.cf {
    *zoom: 1;
}

Uygulanmış örnek

Kaynak: http://nicolasgallagher.com/micro-clearfix-hack/

Bir Frontendci

Frontendci.com, sektörde çalışan ve gelecekte bu sektörde çalışmak isteyen tüm frontend geliştiriciler için türkçe html, css ve javascript eğitim, anlatım kaynaklarını derlemek amacıyla kurulmuştur. Türkçe eğitim videoları, anlatımlar, makaleler ve sunumların toplandığı bir mecradır.

Tüm içerikleri göster

Yorum yap

Bir Cevap Yazın