Vlastnost clear

Vlastnost clear zruší obtékání jednoho elementu ostatními, nastavené vlastností float. Může nabývat následujících hodnot: none (zruší účinek sebe sama), both (zruší float současně zprava i zleva), left (zruší float zleva), right (zruší float zprava).

Syntaxe

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

Příklad

Zrušme obtékání obrázku textem zleva:

<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;
}

Příklad

Nyní zrušme obtékání obrázku textem zprava:

<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;
}

Příklad

Zrušme účinek samotné vlastnosti 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;
}

Viz také

vlastnost bottom,
která nastavuje pozici spodního okraje elementu
vlastnost top,
která nastavuje pozici horního okraje elementu
vlastnost left,
která nastavuje pozici levého okraje elementu
vlastnost right,
která nastavuje pozici pravého okraje elementu
pseudoprvok ::backdrop,
který nastavuje umístění za prvním elementem
vlastnost caption-side,
která nastavuje pozici nadpisu tabulky