Float, CSS’de herhangi bir elemanın bir diğerini etkilemeden sağ yada sol şeklinde konum verilmesi için kullanılan özelliktir. Float’ın Türkçesi şamandıradır.
CSS’de Float Nasıl Kullanılır?
CSS’de Float yatay konumdaki herhangi bir elemanı sağ veya sol tarafa hizalamak için kullanılır. Örneğin tasarımda table kodları yerine div’lere sağ ve sol gibi hizalar verebilmek için CSS’in float tekniğinden faydalanırız. Hemen bir örnek kod dizgisiyle açıklayalım;
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
İlginizi Çekebilir!Kod Nedir? Kod Yazma ve Kod Öğrenme
Kod, yazılım dilinde belli durumları içerisinde barındıran tümcelere verilen addır. Bu tümceler hangi durum karşısında nasıl bir tepki verileceğini, hangi ögelerin çağırılacağına hangi anlarda hangi durumların oluşacağı gibi ...
WM Aracı
td
{
width:200px;
height:200px;
}
.nesne1
{
background-color:#999;
}
.nesne2
{
background-color:#F00;
}
.nesne3
{
background-color:#00F;
}
Kutu 1
Kutu 2
Kutu 3
Bu şekilde çıktı aldığımızda oluşturduğumuz kutuların yan yana geldiğini göreceksinizdir. Oysa aynı elementleri div’ler yardımıyla yaparsak her div kendi içerisinde bir element sayılacağı için Div’ler alt alta sıralanacaktır.
Örneğin;
www.bilisimogretmeni.com CSS Dersleri
div
{
width:200px;
height:200px;
}
.nesne1
{
background-color:#999;
}
.nesne2
{
background-color:#F00;
}
.nesne3
{
background-color:#00F;
}
Kutu 1
Kutu 2
Kutu 3
Şimdiyse bu Div’leri bir de float değeri vererek yapacağız, yani kutuları hizalamak için CSS’e eklemesi yapacağız. Bu eklemeyi yaptığımızdaysa sonuç olarak tüm kutular yan yana dizilmiş şekilde hizada olacaktır.
www.bilisimogretmeni.com CSS Dersleri
div
{
width:200px;
height:200px;
}
.nesne1
{
background-color:#999;
}
.nesne2
{
background-color:#F00;
}
.nesne3
{
background-color:#00F;
}
Kutu 1
Kutu 2
Kutu 3