Text i förälder till floats i CSS

Låt oss ta bort egenskapen height för div:en och sätta en liten text före bilden.

I detta fall kommer höjden på vår div att vara lika med textens höjd, och bilden kommer fortfarande att sticka ut förbi div:en:

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

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

Результат:

Låt oss sätta texten efter bilden - resultatet förändras inte:

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

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

Результат:

Låt oss göra så att bilden flyter till vänster - resultatet blir analogt:

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

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

Результат:

Låt oss lägga till ytterligare en div under - bilden kommer att överlappa även den:

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

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

Результат:

Om man däremot lägger till så mycket text i den första div:en att dess höjd blir större än bildens - kommer den inte att överlappa den andra div:en:

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

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

Результат:

Denna punkt är mycket viktig - under utveckling kan det hända att du i ett visst block har tillräckligt mycket text, men sedan i den verkliga driften av webbplatsen kommer det att finnas mindre text i detta block än planerat. Det blir då så att i detta fall uppstår problemet med att flytande element överlappar angränsande block.