Својство clear

Својство clear поништава обавијање једног елемента другим, задато својством float. Може да прихвати следеће вредности: none (поништава дејство себе самог), both (поништава float истовремено са десне и леве стране), left (поништава float са леве стране), right (поништава float са десне стране).

Синтакса

селектор {
	clear: none или left или right или both
}

Пример

Хајде да поништимо обавијање слике текстом са леве стране:

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

Пример

Сада хајде да поништимо обавијање слике текстом са десне стране:

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

Пример

Хајде да поништимо дејство самог својства 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;
}

Види још

својство bottom,
које задаје позицију доњег ивице елемента
својство top,
које задаје позицију горње ивице елемента
својство left,
које задаје позицију леве ивице елемента
својство right,
које задаје позицију десне ивице елемента
псеудо-елемент ::backdrop,
који задаје распоред после првог елемента
својство caption-side,
које задаје позицију наслова табеле