CSS'te float Özelliğine Giriş

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

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

cssdiv {
  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:

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

cssdiv {
  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:

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

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

Результат: