Vlastnosť clear

Vlastnosť clear zruší obtok jedného elementu inými, zadaný vlastnosťou float. Môže nadobúdať nasledujúce hodnoty: none (zruší pôsobenie seba samého), both (zruší float súčasne vpravo a vľavo), left (zruší float vľavo), right (zruší float vpravo).

Syntax

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

Príklad

Zrušme obtok obrázka textom zľava:

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

Príklad

Teraz zrušme obtok obrázka textom sprava:

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

Príklad

Zrušme pôsobenie samotnej 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;
}

Pozrite tiež

vlastnosť bottom,
ktorá nastavuje pozíciu dolného okraja elementu
vlastnosť top,
ktorá nastavuje pozíciu horného okraja elementu
vlastnosť left,
ktorá nastavuje pozíciu ľavého okraja elementu
vlastnosť right,
ktorá nastavuje pozíciu pravého okraja elementu
pseudoelement ::backdrop,
ktorý nastavuje umiestnenie za prvým elementom
vlastnosť caption-side,
ktorá nastavuje pozíciu nadpisu tabuľky