CSS Float; bir web sitede veya web sayfasında resim galerisi kullanıldığını biliyoruz. Peki hiç düşündünüz mü bu elemanlar nasıl yan yana geliyor? İşte bu makalede tam da olarak bu sorunun cevabı olan CSS Float’a değineceğiz.
Element Kaydırma (CSS Float)
Elementler yatay eksende sola ve sağa kaydırılabilir ancak bu kaydırma dikey eksende söz konusu değildir. Sağa ve sola kaydırılan bu elementler bir diğerin sonundan başlar ve kapladıkları alan kadar yer kaplar. Örneğin solda fotoğraf sağda yazı olmasını istediğimiz bazı durumlar vardır bu durumlarda ikisini yan yana getirmek CSS Float ile mümkün. Float ile yan yana getirirken tabiki de bunlardan hangisinin sağda hangisinin solda olacağına da biz karar vereceğiz.
Elementleri Yan Yana Sıralamak
Bir web sayfasında sıklıkla resim galerileri ile karşılaşmışsınızdır. Resimler sıralı ve yan yana sıralanmış şekilde durur. Bunlar aynı boyutta ve eşit olması gerekmekte aksi taktirde kaydırak birbiri ile uyumlu olmaz. Birbiri ile aynı boyutta olduğunu netleştirdikten sonra CSS Float özelliği ile istediğimiz kadar elementi yan yana getirebileceğiz
.thumb
{
float: left;
width: 110px;
height: 110px;
margin: 5px;
}
Yukarıda örnek kodda yer alan özelliğe sahip kutuları sıraladık. Gördüğünüz gibi her bir kutu yan yana geldi normal şartlarda alt alta sıralanması gerekirken CSS Float özelliği sayesinde yan yana sıralanmasını sağladık.
Kaydırmayı Sonlandırmak
Kardırma yapıldığında elementler sürekli yan yana gelmektedir dedik peki bunu bitirmek istediğimizde ne yapabiliriz? İşte bu durumda da imdadımıza clear:both; kodu yetişiyor bu kod ile kaydırma sonlandırılır ve elementler varsayılan olarak devam eder.
.text_line
{
clear: both;
}
Yukarda görüldüğü üzere yan yana sıralanan kutuların yanına bir kutu eklemeden önce clear: both; özelliğini kullandık ve 4. kutumuz yanlarına değil de kaldığı yerden varsayılan şeklinde yani alt alta sıralandı.
Kaydırmalı bir nesnenin hemen ardından class=”text_line” kullanılmış bir element yer alıyorsa, bu element kaydırma olayının dışında tutulacak ve normal şekilde sayfaya yerleştirilecektir. Bir nevi kaydırma işlemi bitiminde o elemente öncelik verilir ve ilk olarak clas=”text_line” kullanılmış element düzene girer.