Уласцівасць 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>
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
	</p>
</div>

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

Прыклад

Цяпер давайце адмянім абцяканне малюнка тэкстам справа:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
	</p>
</div>

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

Прыклад

Давайце адмянім дзеянне самога ўласцівасці clear:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
		тэкст тэкст тэкст тэкст тэкст тэкст
	</p>
</div>

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

Глядзіце таксама

уласцівасць bottom,
якое задае пазіцыю ніжняга краю элемента
уласцівасць top,
якое задае пазіцыю верхняга краю элемента
уласцівасць left,
якое задае пазіцыю левага краю элемента
уласцівасць right,
якое задае пазіцыю правага краю элемента
псеўдаэлемент ::backdrop,
які задае размяшчэнне пасля першага элемента
уласцівасць caption-side,
якое задае пазіцыю загалоўка табліцы