CSS'te clear Özelliği ile Kaldırmayı İptal Etme

Bu tür bir sorunu çözmek için, kaldırmayı iptal eden özel bir clear özelliği vardır. left değeri soldaki kaldırmayı iptal eder, right değeri - sağdakini, ve both değeri - her iki taraftakini. Bu değer en sık kullanılandır.

Yani, clear özelliği kaldırmayı iptal eder. Bizim durumumuzda bu, ilk div'deki kayan resmin ikinci div'in üzerine gelmemesini sağlamamıza izin verecektir.

Bu durumda clear, kayan elemanların üzerine gelmemesi gereken elemana verilmelidir, yani bizim durumumuzda ikinci div'e verilmelidir.

Bunu yapalım - ikinci div'e parent sınıfına ek olarak clearfix sınıfını da verelim ve bu yeni sınıf için clear özelliğini both değerinde ayarlayalım - resmin üzerine gelmesi kaybolacaktır:

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

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

.clearfix {
	clear: both;
}

clearfix adı yaygın olarak kabul edilmiştir, bu nedenle gelecekte tam olarak onu kullanın.