clear Özelliği

clear özelliği, bir elemanın float özelliği ile belirlenen diğer elemanlar tarafından sarılmasını iptal eder. Şu değerleri alabilir: none (kendi eylemini iptal eder), both (hem sağdan hem de soldan float'ı iptal eder), left (soldan float'ı iptal eder), right (sağdan float'ı iptal eder).

Sözdizimi

seçici {
	clear: none veya left veya right veya both
}

Örnek

Resmin soldan metinle sarılmasını iptal edelim:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		metin metin metin metin metin metin
		metin metin metin metin metin metin
		metin metin metin metin metin metin
		metin metin metin metin metin metin
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

Örnek

Şimdi resmin sağdan metinle sarılmasını iptal edelim:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		metin metin metin metin metin metin
		metin metin metin metin metin metin
		metin metin metin metin metin metin
		metin metin metin metin metin metin
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

Örnek

clear özelliğinin kendi eylemini iptal edelim:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		metin metin metin metin metin metin
		metin metin metin metin metin metin
		metin metin metin metin metin metin
		metin metin metin metin metin metin
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

Ayrıca Bakınız

bottom özelliği,
elemanın alt kenarının konumunu belirler
top özelliği,
elemanın üst kenarının konumunu belirler
left özelliği,
elemanın sol kenarının konumunu belirler
right özelliği,
elemanın sağ kenarının konumunu belirler
::backdrop sözde elemanı,
ilk elemandan sonraki konumu belirler
caption-side özelliği,
tablo başlığının konumunu belirler