De clear eigenschap
De eigenschap clear maakt het
omvloeien van een element door andere,
gedefinieerd door de eigenschap float, ongedaan.
Kan de volgende waarden aannemen:
none (maakt de werking van zichzelf ongedaan),
both (maakt float tegelijkertijd rechts en links ongedaan),
left (maakt float links ongedaan), right (maakt
float rechts ongedaan).
Syntaxis
selector {
clear: none of left of right of both
}
Voorbeeld
Laten we het omvloeien van de afbeelding door tekst aan de linkerkant ongedaan maken:
<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;
}
:
Voorbeeld
Laten we nu het omvloeien van de afbeelding door tekst aan de rechterkant ongedaan maken:
<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;
}
:
Voorbeeld
Laten we de werking van de
eigenschap clear zelf ongedaan maken:
<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;
}
:
Zie ook
-
de eigenschap
bottom,
die de positie van de onderrand van het element definieert -
de eigenschap
top,
die de positie van de bovenrand van het element definieert -
de eigenschap
left,
die de positie van de linkerrand van het element definieert -
de eigenschap
right,
die de positie van de rechterrand van het element definieert -
het pseudoelement
::backdrop,
dat de positionering na het eerste element definieert -
de eigenschap
caption-side,
die de positie van de tabeltitel definieert
