Clear қасиеті

clear қасиеті float қасиеті арқылы берілген бір элементтің басқаларымен айналысуын жояды. Келесі мәндерді қабылдай алады: none (өз әрекетін жояды), both (float әрекетін бір мезгілде оң жақтан және сол жақтан жояды), left (float әрекетін сол жақтан жояды), right (float әрекетін оң жақтан жояды).

Синтаксис

селектор {
	clear: none немесе left немесе right немесе both
}

Мысал

Суреттің сол жағынан мәтінмен айналысуын жояйық:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
	</p>
</div>

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

Мысал

Енді суреттің оң жағынан мәтінмен айналысуын жояйық:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
	</p>
</div>

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

Мысал

clear қасиетінің өз әрекетін жояйық:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
		мәтін мәтін мәтін мәтін мәтін мәтін
	</p>
</div>

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

Сондай-ақ қараңыз

bottom қасиеті,
элементтің төменгі шетінің орнын белгілейді
top қасиеті,
элементтің жоғарғы шетінің орнын белгілейді
left қасиеті,
элементтің сол шетінің орнын белгілейді
right қасиеті,
элементтің оң шетінің орнын белгілейді
::backdrop жасанды элементі,
бірінші элементтен кейінгі орналасуын белгілейді
caption-side қасиеті,
кесте тақырыбының орнын белгілейді