Clear häsiýeti

Clear häsiýeti, float häsiýeti bilen kesgitlenen bir element başgalar tarapyndan gurluşygy aýyrýar. Aşakdaky gymmatlyklary kabul edip biler: none (öz özüniň täsirini aýyrýar), both (float-y sagdan we soldan bir wagtda aýyrýar), left (soldaky float-y aýyrýar), right (sagdaky float-y aýyrýar).

Sintaksis

selektor {
	clear: none ýa-da left ýa-da right ýa-da both
}

Mysal

Geliň, suratyň tekstiň soldan gurluşygyny aýyralyň:

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

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

Mysal

Indi bolsa, suratyň tekstiň sagdan gurluşygyny aýyralyň:

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

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

Mysal

Geliň, clear häsiýetiniň özüniň täsirini aýyralyň:

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

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

Şeýle-de göz aňyryň

elementiň aşaky gyrasynyň ýerleşýşini kesgitleýän, bottom häsiýeti
elementiň ýokarky gyrasynyň ýerleşýşini kesgitleýän, top häsiýeti
elementiň çep gyrasynyň ýerleşýşini kesgitleýän, left häsiýeti
elementiň sag gyrasynyň ýerleşýşini kesgitleýän, right häsiýeti
bir-inji elementden soň ýerleşýşini kesgitleýän, ::backdrop psewdoelementi
tablisa at başlygynyň ýerleşýşini kesgitleýän, caption-side häsiýeti