Скасування обтікання за допомогою властивості 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;
}