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

Для вырашэння такой праблемы існуе спецыяльная ўласцівасць clear, якая адмяняе абыцканне. Значэнне left адмяняе абыцканне злева, значэнне right - справа, а значэнне both - з абодвух бакоў. Гэта значэнне і выкарыстоўваецца найчасцей.

Такім чынам, уласцівасць clear адмяняе абыцканне. У нашым выпадку гэта дазволіць нам зрабіць так, каб плаваючая карцінка з першага дыву не напаўзала на другі дыў.

Пры гэтым clear варта даваць таму элементу, на які не павінны напаўзаць плаваючыя элементы, гэта значыць у нашым выпадку яго варта даць другому дыву.

Давайце зробім гэта - дадзім другому дыву акрамя класа parent яшчэ і клас clearfix і для гэтага новага класа зададзім уласцівасць clear у значэнні both - напаўзанне карцінкі знікне:

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

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

.clearfix {
  clear: both;
}

Результат:

Назва clearfix з'яўляецца агульнапрынятой, таму ў далейшым выкарыстоўвайце менавіта яе.