Vloeielemente onder etikette in CSS

Gestel ons het nou twee paragrawe en 'n prentjie, geplaas in die eerste paragraaf. Gestel hierdie prentjie het die eienskap float met die waarde right, asook deursigtigheid:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

Laat ons nou in die HTML-kode die prentjie ná die eerste paragraaf plaas en kyk wat gebeur:

<div>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<img src="img.png" alt="">
	<p>
		some long text
	</p>
</div>

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

Soos ons kan sien, vloei die teks van die tweede paragraaf om die prentjie, maar nie die eerste nie.

Laat ons die prentjie heeltemal na ná die tweede paragraaf skuif. In hierdie geval sal dit regs vloei, maar daar sal geen omvloeiing wees nie:

<div>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

Dit blyk dat slegs die elemente wat onder die prentjie is dit sal omvloei, maar nie die wat bo dit is nie.