Адмена абыцкання з дапамогай уласцівасці clear у CSS

Для вырашэння такой праблемы існуе спецыяльная ўласцівасць 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 з'яўляецца агульнапрынятой, таму ў далейшым выкарыстоўвайце менавіта яе.