Bevezetés a CSS float tulajdonságába

Tegyük fel, hogy van egy div-ünk valamilyen hosszú szöveggel. Helyezzük a szöveg elejére egy képet:

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

div {
	width: 400px;
	text-align: justify;
}

Amint láthatod, a kép alja az első szövegsoron helyezkedik el, a többi része pedig felfelé kerül. A kép jobb oldalán nagy üres tér keletkezik. Tegyük úgy, hogy a szöveg kitölti ezt az üres teret. Ehhez állítsuk a kép float tulajdonságát left értékre:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

Tehát most a kép balra úszik, a szöveg pedig ennek megfelelően jobbrál folyik körül. Eközben a kép melletti üres tér eltűnt.

A kép nem balra, hanem jobbra is úszhat. Ehhez a float tulajdonságot állítsuk right értékre:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

Vegyél egy hosszú szöveget. Helyezz el egy képet a szöveg elején, és egy másikat a közepe táján. Állítsd be úgy, hogy az első kép balra, a második pedig jobbra ússzon.