Anulowanie opływu za pomocą właściwości clear w CSS

Aby rozwiązać ten problem, istnieje specjalna właściwość clear, która anuluje opływanie. Wartość left anuluje opływanie z lewej strony, wartość right - z prawej strony, a wartość both - z obu stron. Ta wartość jest używana najczęściej.

Zatem właściwość clear anuluje opływanie. W naszym przypadku pozwoli nam to sprawić, że unoszący się obrazek z pierwszego diva nie nachodził na drugi div.

Jednocześnie clear należy nadać temu elementowi, na który nie powinny nachodzić unoszące się elementy, czyli w naszym przypadku warto go nadać drugiemu divowi.

Zróbmy to - nadajmy drugiemu divowi oprócz klasy parent także klasę clearfix i dla tej nowej klasy ustawmy właściwość clear na wartość both - nachodzenie obrazka zniknie:

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

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

.clearfix {
	clear: both;
}

Nazwa clearfix jest powszechnie przyjęta, dlatego w przyszłości używaj właśnie jej.