Float, CSS’in temel kavramlarından biridir. Bu prensibin anlaşılması olmadan CSS tabanlı web siteleri oluşturulamaz. Float aslında bir elementin başka bir elementin solunda veya sağında yer alması anlamına gelir. (Normalde, bu element başka bir elementin altında olacaktır).
<p><img src="bild.jpg" /> Bu sette, broşürlerinizde, arka planlarınızda vb. kullanabileceğiniz 12 kendi şekliniz bulunmaktadır. Şekiller, 18, 21 ve 24 şeritten ve farklı ışın genişliklerinden oluşmaktadır. Bu ön ayarlar, düzenlerinizde ve resimlerinizde güzel efektler için iyi bir başlangıç noktasıdır.</p>
Bu, bir paragrafın tanımlandığı, bu paragrafta bir resim ve normal metin olduğu anlamına gelmektedir.
Sonuca bakıldığında, resmin metin akışında olduğu görülmektedir.
Şimdi float özelliği devreye giriyor.
img { float: left;}
Sonuca bir göz atalım.
Bu durumda, resim float edilmiş oldu. Metin resmin etrafında akar hale geldi.
float özelliğine left ve right değerlerini atayarak elemanı sola (float: left) veya sağa (float: right) yerleştirebilirsiniz. Ayrıca, resme hemen float: right özelliğini uygulayabilirsiniz.
Bu durumda üç şey olmaktadır:
• Grafik normal akıştan çıkarılır.
• p elementinin en üstünde görüntülenir.
• Mümkün olduğunca sağda gösterilir.
Şimdiye kadar yapılanların hiç de hoş görünmediği açıktır. Aslında, resim ile akıp giden metin arasındaki boşluklar eksiktir. Bunun için syntax'ı şu şekilde ayarlayın:
img {
float: left;
margin-right: 20px;
}
Resme 20 piksellik bir sağ kenar boşluğu atandı. Bu da şu görüntüyü verir:
Burada kenar boşluklarıyla biraz oynayabilirsiniz.
Float Etmenin Sonlandırılması
Bir kez daha resim örneğine dönersek, syntax'ı ek bir metin paragrafıyla genişletiyorum.
<p><img src="bild.jpg" /></p><p> Bu sette, broşürlerinizde, arka planlarınızda vb. kullanabileceğiniz 12 kendi şekliniz bulunmaktadır. Şekiller, 18, 21 ve 24 şeritten ve farklı ışın genişliklerinden oluşmaktadır. Bu ön ayarlar, düzenlerinizde ve resimlerinizde güzel efektler için iyi bir başlangıç noktasıdır.</p>
Sonuç şöyle görünüyor:
Açıkçası, resmi saran yalnızca ilk paragraf değil, aynı şekilde ikinci metin paragrafıdır da. Bunun nedeni, resmin birinci paragraftan aşağı doğru taşmasıdır. Daha iyi anlaşılması için resmin bulunduğu paragrafa bir arka plan rengi atayacağım.
Sonucu gözlemlediğinizde, resmin aslında paragraftan aşağı doğru taştığını görürsünüz. Bu tabii ki her zaman istenilen bir durum değildir. Bu noktada, clear özelliği ilginç hale gelir. Çünkü bu sayede float işlemi sonlandırılabilir. clear, takip eden bir elementin bir floated elementin altında, yanında değil başlamasını zorunlu kılar. clear özelliği, şu değerleri tanır:
• left – float: left işlemini sonlandırır
• right – float: right işlemini sonlandırır
• both – hem float: right'ı hem de float: left'i sonlandırır
Aşağıdaki örnekte ikinci paragrafta clear: left özelliği atanarak float işlemi sonlandırılmıştır.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" /> Bu sette, broşürlerinizde, arka planlarınızda vb. kullanabileceğiniz 12 kendi şekliniz bulunmaktadır. Şekiller, 18, 21 ve 24 şeritten ve farklı ışın genişliklerinden oluşmaktadır. Bu ön ayarlar, düzenlerinizde ve resimlerinizde güzel efektler için iyi bir başlangıç noktasıdır.</p>
<p style="clear:left;"> Bu sette, broşürlerinizde, arka planlarınızda vb. kullanabileceğiniz 12 kendi şekliniz bulunmaktadır. Şekiller, 18, 21 ve 24 şeritten ve farklı ışın genişliklerinden oluşmaktadır. Bu ön ayarlar, düzenlerinizde ve resimlerinizde güzel efektler için iyi bir başlangıç noktasıdır.</p>
</body>
</html>
Gösterilen sözdizimi sayesinde ikinci paragraf artık resmin altında görüntüleniyor.
Çoğu durumda clear: left veya clear: right yerine hemen clear: both kullanabilirsiniz. Bu yüzden ihtiyaç duyulduğunda basitçe çağırabileceğiniz uygun bir sınıf oluşturmanızı öneririz.
.clearing {
clear: both;
}
Bu sınıfı bir öğenin kaydırmasının sonlandırılması gerektiğinde her zaman kullanabilirsiniz.
<p class="clearing">İçerikler ...</p>
Floatlama Ne İşe Yarar
Tersine, kaydırma sadece metin akışıyla ilgili değil, aynı zamanda CSS tabanlı web sitelerinin temel kavramını oluşturur. Çünkü kaydırma sayesinde örneğin çok sütunlu düzenleri kolayca uygulamak mümkündür. Bunun için aşağıdaki örneğe bakınız:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Anasayfa</li>
<li>İletişim</li>
<li>Hakkımızda</li>
</ul>
</div>
<div id="inhalt">
Burası web sitesinin içeriği.
</div>
</body>
</html>Burada ikili bir düzen oluşturuluyor. Önemli olan: Sütunlar yan yana duruyor.
Ve bu yan yana durma konsepti floating kavramıyla sağlanır. Floating konseptiyle web sayfalarının float yapısına dayalı inşası hakkında detaylı bilgiler bu serinin ilerleyen bölümlerinde bulunmaktadır.
