Tekst i forelder av flytere i CSS

La oss fjerne egenskapen height for div-en og sette en liten tekst foran bildet.

I dette tilfellet vil høyden på div-en vår være lik høyden på teksten, og bildet vil fortsatt stikke ut av div-en:

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

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

Результат:

La oss sette teksten etter bildet - resultatet forblir uendret:

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

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

Результат:

La oss få bildet til å flyte til venstre - resultatet blir tilsvarende:

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

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

Результат:

La oss legge til en div til nedenfor - bildet vil overlappe den også:

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

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

Результат:

Hvis derimot den første div-en får så mye tekst at høyden blir større enn bildets høyde - vil den ikke overlappe den andre div-en:

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 poenget er veldig viktig - under utvikling kan det hende at i en blokk har du ganske mye tekst, og deretter under den faktiske driften av nettstedet vil denne blokken ha mindre tekst enn planlagt. Det vil da oppstå et problem hvor flytende elementer overlapper nærliggende blokker.