Egenskapen clear
Egenskapen clear avbryter
omslutning av ett element av andra,
som definierats av egenskapen float.
Kan ta följande värden:
none (avbryter sin egen funktion),
both (avbryter float samtidigt till höger och vänster),
left (avbryter float till vänster), right (avbryter
float till höger).
Syntax
selektor {
clear: none eller left eller right eller both
}
Exempel
Låt oss avbryta omslutningen av bilden med text till vänster:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: left;
padding-right: 10px;
}
.txt {
clear: left;
}
:
Exempel
Nu låter oss avbryta omslutningen av bilden med text till höger:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: right;
}
:
Exempel
Låt oss avbryta funktionen av själva
egenskapen clear:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: none;
}
:
Se även
-
egenskapen
bottom,
som anger positionen för elementets nedre kant -
egenskapen
top,
som anger positionen för elementets övre kant -
egenskapen
left,
som anger positionen för elementets vänstra kant -
egenskapen
right,
som anger positionen för elementets högra kant -
pseudoelementet
::backdrop,
som anger placering efter det första elementet -
egenskapen
caption-side,
som anger positionen för tabellrubriken