Отмяна на плаване с помощта на свойството clear в CSS

За решаване на такъв проблем съществува специално свойство clear, което отменя плаването. Стойността left отменя плаването отляво, стойността right - отдясно, а стойността both - от двете страни. Тази стойност се използва най-често.

И така, свойството clear отменя плаването. В нашия случай това ще ни позволи да направим така, че плаващото изображение от първия div да не се нахвърля върху втория div.

При това clear трябва да се зададе на този елемент, върху който не трябва да се нахвърлят плаващите елементи, тоест в нашия случай трябва да се даде на втория div.

Нека направим това - да дадем на втория div освен класа 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 е общоприето, затова в бъдеще използвайте именно него.