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,
bottomhäsiýeti -
elementiň ýokarky gyrasynyň ýerleşýşini kesgitleýän,
tophäsiýeti -
elementiň çep gyrasynyň ýerleşýşini kesgitleýän,
lefthäsiýeti -
elementiň sag gyrasynyň ýerleşýşini kesgitleýän,
righthäsiýeti -
bir-inji elementden soň ýerleşýşini kesgitleýän,
::backdroppsewdoelementi -
tablisa at başlygynyň ýerleşýşini kesgitleýän,
caption-sidehäsiýeti