Clear-ominaisuus

Ominaisuus clear peruuttaa elementin kellutuksen muiden elementtien ympärillä, joka on määritelty float-ominaisuudella. Se voi saada seuraavat arvot: none (peruuttaa oman toimintansa), both (peruuttaa float-ominaisuuden samanaikaisesti oikealta ja vasemmalta), left (peruuttaa float-ominaisuuden vasemmalta), right (peruuttaa float-ominaisuuden oikealta).

Syntaksi

valitsija {
	clear: none tai left tai right tai both
}

Esimerkki

Perutaan kuvan kellutus tekstin ympärillä vasemmalta:

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

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

Esimerkki

Perutaan nyt kuvan kellutus tekstin ympärillä oikealta:

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

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

Esimerkki

Perutaan clear-ominaisuuden toiminta:

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

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

Katso myös

ominaisuus bottom,
joka asettaa elementin alareunan sijainnin
ominaisuus top,
joka asettaa elementin yläreunan sijainnin
ominaisuus left,
joka asettaa elementin vasemman reunan sijainnin
ominaisuus right,
joka asettaa elementin oikean reunan sijainnin
pseudoelementti ::backdrop,
joka asettaa sijoittelun ensimmäisen elementin jälkeen
ominaisuus caption-side,
joka asettaa taulukon otsikon sijainnin