Klirfiks və valideynin hundurluyu CSS-də

Gelin bir divi parent sinfi ile qoyaq, icindeki metni cixaraq, yalnız uzən sekli saxlayaq. Artıq bildiyiniz kimi, bu halda divin hundurluyu sifira qeder enecek, ondan yalnız ust ve alt serhed qalacaq. Sekil isə divimizin altından cıxacaq:

<div class="parent">
	<img src="img.png" alt="">
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

Gelin edək ki, uzən sekil divimizin hundurluyunu artsın. Bunun ucun istifade olunan hiyləgər bir usul var - sekilden sonra metni olmayan clearfix sinifli bir div qoyaq.

Bizim seklimiz uzən elementdir ve valideynin hundurluyunu artırmır, amma div-klirfiks - uzən deyil ve valideynin hundurluyuna tesir gosterir.

Div-klirfiksə clear xassəsi verildiyi ucun, o, sekli asaqıya iteleyerek onun altında dayanacaq, bununla da valideynin hundurluyunu artıracaq.

Div-klirfiksin ozu bosdur ve ekranda gorunmur, amma eyni zamanda valideynin hundurluyunu artırır.

Beləliklə, gelin cehd edək:

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}