CSS Clearfix

Oral ÜNAL

12 yıl önce

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: &quot;.&quot;;
	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,