CSS'te float Özelliğine Giriş

Uzun bir metni olan bir div'imiz olduğunu varsayalım. Bu metnin başına bir resim ekleyelim:

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

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

Gördüğünüz gibi, resmin alt kısmı metnin ilk satırında yer alıyor ve kalan kısmı yukarıya doğru çıkıyor. Resmin sağ tarafında büyük bir boş alan oluşuyor. Metnin bu boş alanı doldurmasını sağlayalım. Bunun için resme float özelliğini left değeriyle verelim:

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

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

Böylece, resim şimdi solda yüzüyor ve metin buna bağlı olarak sağdan onu sarıyor. Ayrıca resmin yanındaki boş alan kayboldu.

Resmi solda değil de sağda yüzdürmek de mümkün. Bunun için float özelliğini right değerine ayarlayalım:

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

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

Uzun bir metin alın. Metnin başına bir resim, ortasına ise başka bir resim ekleyin. İlk resmin solda, ikinci resmin ise sağda yüzmesini sağlayın.