Clear xususiyati

clear xususiyati float xususiyati bilan belgilangan boshqa elementlar tomonidan elementni oqimdan chiqishini bekor qiladi. Quyidagi qiymatlarni qabul qilishi mumkin: none (o'zining ta'sirini bekor qiladi), both (float ni o'ng va chap tomondan bir vaqtning o'zida bekor qiladi), left (chap tomondan float ni bekor qiladi), right (o'ng tomondan float ni bekor qiladi).

Sintaksis

selector {
	clear: none yoki left yoki right yoki both
}

Misol

Keling, rasmning chap tomondan matn bilan oqimdan chiqishini bekor qilaylik:

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

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

Misol

Endi keling, rasmning o'ng tomondan matn bilan oqimdan chiqishini bekor qilaylik:

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

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

Misol

Keling, clear xususiyatining o'zining ta'sirini bekor qilaylik:

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

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

Shuningdek qarang

bottom xususiyati,
bu elementning pastki chetining joylashuvini belgilaydi
top xususiyati,
bu elementning yuqori chetining joylashuvini belgilaydi
left xususiyati,
bu elementning chap chetining joylashuvini belgilaydi
right xususiyati,
bu elementning o'ng chetining joylashuvini belgilaydi
::backdrop psevdoelementi,
bu birinchi elementdan keyin joylashuvni belgilaydi
caption-side xususiyati,
bu jadval sarlavhasining joylashuvini belgilaydi