Отмена обтекания с помощью свойства clear

Пусть сейчас у нас есть два дива с классом parent. В каждом из них есть небольшой текст, а в первом диве размещена картинка, которой задано свойство float в значении left.

Как вы уже знаете, в этом случае картинка налезет на второй блок:

<div class="parent">
	<img src="img.png" alt="">
	text
</div>
<div class="parent">
	text
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

Давайте посмотрим, как избежать такого налезания, если оно вас не устраивает.

Отмена обтекания

Для решения такой проблемы существует специальное свойство clear, которое отменяет обтекание. Значение left отменяет обтекание слева, значение right - справа, а значение both - с обоих сторон. Это значение и используется чаще всего.

Итак, свойство clear отменяет обтекание. В нашем случае это позволит нам сделать так, чтобы плавающая картинка из первого дива не налазила на второй див.

При этом clear следует давать тому элементу, на который не должны налазить плавающие элементы, то есть в нашем случае его стоит дать второму диву.

Давайте сделаем это - дадим второму диву кроме класса parent еще и класс clearfix и для этого нового класса зададим свойство clear в значении both - налезание картинки исчезнет:

<div class="parent">
	<img src="img.png" alt="">
	text
</div>
<div class="parent clearfix">
	text
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}

Название clearfix является общепринятым, поэтому в дальнейшем используйте именно его.

Отдельный див с клиарфиксом

На самом деле клиарфикс чаще всего используют в виде отдельного дива, который ставится перед тем дивом, для которого вы хотите отменить налезание, вот так:

<div class="parent">
	<img src="img.png" alt="">
	text
</div>
<div class="clearfix"></div>
<div class="parent">
	text
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}