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:
<div>
text
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Låt oss sätta texten efter bilden - resultatet förändras inte:
<div>
<img src="img.png" alt="">
text
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Låt oss göra så att bilden flyter till vänster - resultatet blir analogt:
<div>
<img src="img.png" alt="">
text
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Låt oss lägga till ytterligare en div under - bilden kommer att överlappa även den:
<div>
<img src="img.png" alt="">
text
</div>
<div>
text
</div>
div {
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:
<div>
<img src="img.png" alt="">
some long text
</div>
<div>
text
</div>
div {
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.
