
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!XHTML Nedir? XHTML Dersleri ve XHTML Kodları
XHTML (Extensible HyperText Markup Language), istemci taraflı bir metin işaretleme dilidir ve 26 Haziran 2000’den beri bir web standardıdır. XHTML’i, HTML içinde XML kullanılması olarak tanımlayabiliriz. HTML’nin farklı tarayıcılarda...
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