Поништавање обавијања помоћу својства clear у CSS-у

За решавање таквог проблема постоји специјално својство clear које поништава обавијање. Вредност left поништава обавијање са леве стране, вредност right - са десне стране, а вредност both - са обе стране. Ова вредност се и користи најчешће.

Дакле, својство clear поништава обавијање. У нашем случају то ће нам омогућити да учинимо тако да лебдећа слика из првог div-а не прелази на други div.

При томе clear треба дати оном елементу на који не би требало да прелазе лебдећи елементи, односно у нашем случају вреди дати га другом div-у.

Хајде да то урадимо - дамо другом div-у поред класе 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 је општеприхваћен, па га убудуће користите управо тај.