Свойство 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,
которое задает позицию заголовка таблицы