Skip to content

CSS Clearfix

Merhaba arkadaşlar,

Her CSS dosyanıza neredeyse hep eklediğiniz bir css bloğu paylaşıyorum sizinle. CSS Clearfix olarak adlandırılan bu kodcuğa ihtiyaç duymamızın sebebi ise sağa sola fırlatılmış(float) bloklar içinde bulundukları bloğun yüksekliğine etki etmezler. Bu sıkıntıyı gidermek için css clearfix adıyla aklımıza kazınmış olan sınıfı kullanırız. İşte o pratik CSS Kodu:

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

Umarım işinize yarar, kolay gelsin,

TR Kodlama GitHub'da!

TR Kodlama'da yer alan makaleleri GitHub üzerinden düzenleyebileceğinizi biliyor muyudunuz? Harika değil mi? Bu makale ile ilgili düzenleme yapmak isterseniz aşağıdaki butona tıklayınız!

GitHub'da Görüntüle ve Düzenle!