Avbryta flyt med clear-egenskapen i CSS

För att lösa detta problem finns det en speciell egenskap clear som avbryter flyt. Värdet left avbryter flyt till vänster, värdet right - till höger, och värdet both - på båda sidor. Detta värde används oftast.

Så, egenskapen clear avbryter flyt. I vårt fall kommer detta att tillåta oss att göra så att den flytande bilden från den första div:en inte överlappar den andra div:en.

Samtidigt ska clear ges till det element som inte ska överlappas av flytande element, det vill säga i vårt fall bör det ges till den andra div:en.

Låt oss göra detta - ge den andra div:en förutom klassen parent också klassen clearfix och för denna nya klass ställa in egenskapen clear med värdet both - överlappningen av bilden kommer att försvinna:

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

Результат:

Namnet clearfix är allmänt accepterat, så använd det i framtiden.