Oppheving av flyt med clear-egenskapen i CSS

For å løse et slikt problem finnes det en spesiell egenskap clear som opphever flyt. Verdien left opphever flyt til venstre, verdien right - til høyre, og verdien both - på begge sider. Denne verdien brukes mest ofte.

Så, egenskapen clear opphever flyt. I vårt tilfelle vil dette tillate oss å gjøre slik at det flytende bildet fra den første div-en ikke overlapper den andre div-en.

Samtidig bør clear gis til det elementet som flytende elementer ikke skal overlappe, det vil si i vårt tilfelle bør det gis til den andre div-en.

La oss gjøre dette - gi den andre div-en foruten klassen parent også klassen clearfix og for denne nye klassen sette egenskapen clear med verdien both - overlappingen av bildet vil forsvinne:

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;
}

Результат:

Navnet clearfix er allment akseptert, så bruk det i fremtiden.