Merhaba,

CSS’de kaydırma işlemleri için kullanılan float kavraması en zor CSS özelliklerinden biri olabilir. Tüm konumlandırma özellikleri nedeniyle, çevresini en çok etkileyen özelliktir.

Başka bir deyişle, bir float uygulamak yalnızca uygulandığı öğeyi değiştirmekle kalmaz, aynı zamanda atalarını, kardeşlerini, torunlarını ve takip eden öğelerini de değiştirir.

float yalnızca 3 değer alabilir:

  • float:left;veya float:right; öğeyi sol veya sağ yöne doğru kayan bir öğe haline getirir.
  • float: none;ise öğedeki float değerini yok eder.

Float ne zaman kullanılır?

Bir öğeyi kaydırmanın amacı onu bir tarafa itmek ve metnin etrafını sarmasını sağlamaktır.

Davranışı açıklamak için yaygın bir örnek kullanalım: bir paragrafın içinde bir görüntüye float özelliği verelim.

<p>
  <img src="ataturk-nutuk.jpg">
  "Kurtuluş çaresi ararken İngiltere, Fransa, İtalya gibi büyük devletleri gücendirmemek temel ilke olarak kabul edilmekte idi. Bu devletlerden yalnız biri ile bile başa çıkılamayacağı kuruntusu hemen bütün kafalarda yer etmişti. Osmanlı Devleti'nin yanında, koskoca Almanya, Avusturya - Macaristan varken hepsini birden yenip yerlere seren İtilâf kuvvetleri karşısında, yeniden onlarla çatışmaya varabilecek durumlara girmekten daha büyük mantıksızlık ve akılsızlık olamazdı.  Bu zihniyette olan yalnız halk değildi; özellikle seçkin ve aydın denen insanlar böyle düşünüyordu."
</p>

Görünümü:

Metin içine görüntü eklerken karşılaşılan sorun, görüntünün tek bir metin satırına sığması ve bu nedenle üzerinde bulunduğu satırın yüksekliğini arttırmasıdır. Örneğimizde, görselimiz 133 piksel yüksekliğindedir. İstediğimiz metni görüntünün etrafına sarmaktır. Bunun için görsele bir float değeri tanımlayacağız:

img{float: left;}

Şimdiki görüntüsü:

Gördüğünüz gibi, görüntü sola itilir ve takip eden metin görüntünün etrafına sarılır:

  • ilk olarak görüldüğü gibi metin ilk olarak görselin sağ yanına kayar
  • ardından metnin görselin sağına sığmayan bölümü, görselin aşağısındaki boş alandan devam eder. 

Metin yeterince uzun değilse ne olur?

Bu durumda görsel, bulunduğu paragraf alanından daha yüksek olduğu için aşağıya doğru taşacak. Ve bu bozuk bir görüntüye sebep olabilir.

Float özelliğinin neden öngörülemez olduğunu göstermek için bu düzen hatasını bilerek bıraktık: kendi üst öğelerinin ve kendi kardeş öğelerinin görünümlerini bozabilecekleri gibi, üst öğesinin kardeş öğelerini dahi bozabilirler!

Çünkü float:left;, öğeyi sayfanın doğal akışından çıkartır. İçerisinde bulunduğu üst öğesi olan paragrafın yüksekliğini sadece içeriğindeki yazının yüksekliğine göre ayarlanır. Başka bir deyişle, görselin yükseklik ölçüsü dikkate alınmaz.

float = block

Float değeri tanımlanmış öğeler otomatik olarak display:block;özelliği de kazanır. Ve block öğesi gibi davranacaktır. Buna göre;

  • Spesifik bir genişlik (width) ve yükseklik (height) tanımlanabilirler.
  • Eğer yükseklik ayarlanmamışsa, öğenin yüksekliği satır yüksekliğidir (line-height).
  • Eğer width:100%; ayarlanmışsa block-seviye öğe gibi davranır.

Floatı kaldırmak

CSS clear özelliği, float’tan sonra öğeyi kaydırmaya izin verir. Bu sadece block öğelere uygulanabilir.

<p>
<img src="atam.jpg">
  <span>"Adalet dilenmekle ve başkalarına kendini acındırmakla ulus işleri, devlet işleri gorülemez; ulusun ve devletin onuru ve bağımsızlığı güven altına alınamaz."</span>
</p>

CSS:

img{ float: left;}
span{ clear: left; display: block;}

Görünümü:

Metnin görselin yanına itilmesi yerine, clear:left;metni görselin altına iter.