Doordringen van zwevende elementen door tags in CSS
Stel dat de tekst nu in alinea's staat,
en de afbeelding, waaraan de eigenschap float is toegewezen,
zich boven deze alinea's bevindt. In dit geval
zal alles werken zoals het werkte - de aanwezigheid
van andere tags hindert het omstromen niet:
<div>
<img src="img.png" alt="">
<p>
some long text
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
img {
float: left;
}
:
Stel dat er nu weinig tekst in de eerste alinea staat - in dit geval zal de afbeelding ook door de tweede alinea heen dringen:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
img {
float: left;
}
:
