Tekst i forælder til floats i CSS

Lad os fjerne egenskaben height for div'en og sætte en lille tekst før billedet.

I dette tilfælde vil højden på vores div være lig med højden af teksten, og billedet vil stadig stikke ud over div'en:

html<div>
  tekst
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

Lad os sætte teksten efter billedet - resultatet ændrer sig ikke:

html<div>
  <img src="img.png" alt="">
  tekst
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

Lad os gøre så billedet flyder til venstre - resultatet vil være analogt:

html<div>
  <img src="img.png" alt="">
  tekst
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Lad os tilføje endnu en div nederst - billedet vil overlappe den:

html<div>
  <img src="img.png" alt="">
  tekst
</div>
<div>
  tekst
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Hvis man derimod tilføjer så meget tekst til den første div, at dens højde er større end billedets - vil det ikke overlappe den anden div:

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  tekst
</div>

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Dette punkt er meget vigtigt - under udvikling kan det ske, at i en bestemt blok er der en del tekst, og derefter, når sitet er i brug, vil der være mindre tekst i denne blok end planlagt. Det vil resultere i, at problemet med overlappende flydende elementer på tilstødende blokke vil blive synligt.