CSS Float Nedir?

Bu yazıda örnek kullanım şekilleriyle bu temel CSS konusu üzerinde duracağız.

Float Nedir?
 Float basitçe kendisini taşıyan taşıyıcının sağ ya da sol tarafına kaydırılabilen bir kutudur (mesela bir div).

Bu kutu float uygulanarak sağ tarafa kaydırılmıştır.

Float'ın en temel özelliği, içerik parçalarını üst üste değil de yan yana düzenlemeye imkan sağlamasıdır (tablo kolonlarına benzer ancak daha iyi bir düzenleme imkanı sağlar). Bu da yazı kolonları ya da yandaki kutu gibi sayfaki elemanları ileri düzeyde konumlandırmaya imkanı sağlar.

Floatlar img elemanına ait align=left ve align=right özelliklerine de kısmen benzemektedir.



float Özelliği
CSS'te float eleman oluşturmak için aşağıdaki örnekte görüldüğü gibi float özelliğini kullanıyoruz.

  <div style="float: left; width: 100px;">
    sola kaydırılmış div
  </div>

  <div style="float: right; width: 100px;">
    sağa kaydırılmış div
  </div>

veya ayrı bir stil dosyası ve ID'ler de kullanılabilir.

<div id="solFloat">sola kaydırılmış bir div</div>
<div id="sagFloat">sağa kaydırılmış bir div</div>

.
.
.

#solFloat
{
  float: left;
  width: 100px;
}

#sagFloat
{
  float: right;
  width: 100px;
}

Float ile İlgili Örnekler
Float'ın özelliklerini gösteren birkaç örnek vererek floatla neler yapılabileceğini görelim.

Sola Kaydırılmış Kutu
Aşağıdaki örnekte float uygulanmamış yazı alanı ve float uygulanarak yazı alanının sol tarafına kaydırılmış bir kutu görülmektedir.

<div style="float: left; width: 100px;
  margin: 5px; padding: 5px; border: 1px solid black;">
  <p>Float uygulanarak sola kaydırılmış yazı kutumuz.</p>
</div>
 
<p>
  Düz, float uygulanmamış yazı alanımız.
  Düz, float uygulanmamış yazı alanımız.
  Düz, float uygulanmamış yazı alanımız.
  Düz, float uygulanmamış yazı alanımız. 
  Düz, float uygulanmamış yazı alanımız.
  Düz, float uygulanmamış yazı alanımız. 
  Düz, float uygulanmamış yazı alanımız.
</p>

Float uygulanarak sola kaydırılmış yazı kutumuz.

Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız.



Sağa Kaydırılmış Kutu
Bu örnek de yukarıda bahsettiğimiz örneğe benzemekte ancak bu kez kutumuz sola değil sağa kaydırıldı.

<div style="float: right; width: 100px;
  margin: 5px; padding: 5px; border: 1px solid black;">
  <p>This is our right-floated text box.</p>

</div>
 
<p>
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
</p>

Float uygulanarak sağa kaydırılmış yazı kutumuz.

Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız. Düz, float uygulanmamış yazı alanımız.


İki Sütunlu Yazı Alanı
Bu örnekte de iki sütunlu yazı alanı oluşturmak için float uygulanmış yan yana iki kutu kullanacağız. Bunun için sola kaydırılmış iki div kullanıyoruz. İkinci div ilk div'in sağ tarafında duracak.

<div style="float: left; width: 200px; margin-right: 5px;">
  <p>
    Sol taraftaki yazı sütunumuz.
    Sol taraftaki yazı sütunumuz.
    Sol taraftaki yazı sütunumuz.
    Sol taraftaki yazı sütunumuz.  </p>
</div>

<div style="float: left; width: 200px; margin-right: 5px;">
  <p>
    Sağ taraftaki yazı sütunumuz.
    Sağ taraftaki yazı sütunumuz.
    Sağ taraftaki yazı sütunumuz.
    Sağ taraftaki yazı sütunumuz.
    Sağ taraftaki yazı sütunumuz.
  </p>
</div>

<div style="clear: both;"> </div>

Sol taraftaki yazı sütunumuz.
Sol taraftaki yazı sütunumuz.
Sol taraftaki yazı sütunumuz.

Sağ taraftaki yazı sütunumuz.
Sağ taraftaki yazı sütunumuz.
Sağ taraftaki yazı sütunumuz.
Sağ taraftaki yazı sütunumuz.
Sağ taraftaki yazı sütunumuz.

clear Özelliği
Yukardaki örnekte yer alan <div style="clear: both;"> </div>  ifadesi dikkatinizi çekmiştir.

clear özelliği sayesinde clear özelliğini eklediğimiz elemanın ondan bir önceki elemanın yanına gelmeyeceğini garantilemiş oluyoruz. float özellikli divlerimizden sonra clear özellikli bir div koyduğumuzda, float divlerimizden sonra gelecek hiç bir eleman float divlerimizin yanına koyulmaz.

float sütunlarımızdan sonra clear: both özellikli bir eleman koymadığımızda float sütunlarımızdan sonra gelecek tüm içerik sütunlarımızın yanından akmaya çalışacaktır (nasıl bir sonuç vereceğini deneyip görebilirsiniz). Aslında böyle yaparak, tarayıcıya float divlerimiz burada bitiyor diyoruz.

bu yazıda http://www.elated.com/articles/css-floats/ sayfasından faydalanılmıştır.