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қасиеті,
кесте тақырыбының орнын белгілейді