Teksti në prindin e floteve në CSS

Le të heqim vetinë height për div dhe të vendosim një tekst të vogël përpara figurës.

Në këtë rast lartësia e div-it tonë do të jetë e barabartë me lartësinë e tekstit, dhe figura prapë do të dalë përtej div-it:

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

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

Le të vendosim tekstin pas figurës - rezultati nuk do të ndryshojë:

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

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

Le të bëjmë që figura të notojë në anën e majtë - rezultati do të jetë i ngjashëm:

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

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

Le të shtojmë një div tjetër në fund - figura do të kalojë edhe mbi të:

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

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

Nëse në div-in e parë shtohet aq shumë tekst sa që në lartësi të jetë më i madh se figura - ajo nuk do të kalojë mbi div-in e dytë:

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

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

Ky moment është shumë i rëndësishëm - gjatë zhvillimit mund të ndodhë që në një bllok të ketë mjaftueshëm shumë tekst, dhe më pas gjatë funksionimit real të faqes në këtë bllok të ketë më pak tekst sesa është planifikuar. Do të ndodhë që në këtë rast do të shfaqet problemi me kalimin e elementeve notues mbi blloqet fqinje.