Свойство clear

Свойство clear отменяет обтекание одного элемента другими, заданного свойством float. Может принимать следующие значения: none (отменяет действие себя же), both (отменяет float одновременно справа и слева), left (отменяет float слева), right (отменяет float справа).

Синтаксис

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

Пример

Давайте отменим обтекание изображения текстом слева:

<div class="left">
	<img src="bg.png" alt="">
</div>
<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;
}

Пример

Теперь давайте отменим обтекание изображения текстом справа:

<div class="left">
	<img src="bg.png" alt="">
</div>
<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:

<div data-w="cont/image">
	<img src="bg.png" alt="">
</div>
<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,
которое задает позицию заголовка таблицы