Lastnost clear

Lastnost clear prekliče obtekajoči slog enega elementa z drugimi, določen z lastnostjo float. Lahko sprejme naslednje vrednosti: none (prekliče delovanje samega sebe), both (prekliče float hkrati na desni in levi), left (prekliče float na levi), right (prekliče float na desni).

Sintaksa

selektor {
	clear: none ali left ali right ali both
}

Primer

Prekličimo obtekajoči slog slike z besedilom na levi:

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

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

Primer

Zdaj pa prekličimo obtekajoči slog slike z besedilom na desni:

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

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

Primer

Prekličimo delovanje same lastnosti clear:

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

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

Glejte tudi

lastnost bottom,
ki določa pozicijo spodnjega roba elementa
lastnost top,
ki določa pozicijo zgornjega roba elementa
lastnost left,
ki določa pozicijo levega roba elementa
lastnost right,
ki določa pozicijo desnega roba elementa
psevdoelement ::backdrop,
ki določa pozicioniranje za prvim elementom
lastnost caption-side,
ki določa pozicijo naslova tabele