Top

Css Dersleri Bölüm 18 Element yayılımı(Floating)

Css Dersleri Bölüm 18 Element yayılımı(Floating)

Ne Fark Eder ki! Dergisinin hazırlamış olduğu Css Derslerinin 18. bölümü

Element yayılımı, Floating konusu anlatılacaktır bu yazımızda.


 

CSS float(yayılım) nedir?

CSS float ile, bir elementin sağa ya da sola itilebilir, böylelikle diğer elementler çevresini sarabilir ya da boşlukları doldurabilir.

Float görseller için çok sık kullanılır, fakat en çok şablon oluştururken etkilidir.


Elementler nasıl yayılır?

Elementler yatay olarak yayılır, bu demektir elementin yayılımını sadece sağ ve sol konuma doğru yapabilirsiniz, yukarıya veya aşağıya doğru değil.

Yayılmış bir element yani float kullanılmış bir element sağda ya da solda ne kadar boşluk varsa ya da diğer float ve benzeri özellikleri kullanmış elementlerin izin verdiği ölçüde boşluğu kullanır. Genellikle başka bir element kullanmadıysa float’u sola yasla dediğimizde en soldaki elementimiz olacaktır kullandığımız element.

Yaslanan elementin ardından gelen element eğer sığıyorsa satırdaki kalan boşluğu dolduracaktır.

Bir elementi yasladığımızda sola ya da sağa üst satırdaki element etkilenmez.

Eğer bir görseli sağa yaslarsak, devamından gelen metin etrafını saracaktır görselin:

Örnek

img
{
float:right;
}

Siz de deneyin buraya tıklayarak »

 


Birbirine yaslanan elementler

Eğer birbirine yaslanan birkaç element oluşturursanız, boşluk olduğu müddetçe birbirlerine de yaslanacaklardır. Tıpkı elimizde birçok kutunun olması ve bunu bir arabanın kasasına yerleştirmemiz gibi düşünebilirsiniz. Bu şekilde web sitelerindeki modüller bir arada olmaktadır.

Float özelliği kullanılarak hazırlanmış bir imaj galerisi stili yer almaktadır altta:

Örneğin

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Siz de deneyin buraya tıklayarak »

 


Float kullanımını engellemek

Elemetler dediğimiz gibi boşluk buldukça üst satırda, boşlukları dolduracaktır. Bunu bazen engellemek isteriz, bu durumda “clear” adlı özelliği kullanırız.

Clear özelliği der ki; elementin hangi yönünün temiz kalacağını belirle. Bu şekilde elementin; öncesine, sonrasına veya her iki tarafına görünmez bir satır atar. Elementler boşlukları dolduramaz float yazılsalar bile bu şekilde.

Görsel galerinize text_line class’ını yani sınıfını ekleyerek, clear özelliğiyle float’u engelleyebilirsiniz diğer satırlar için:

Örnek

.text_line
{
clear:both;
}

Siz de deneyin buraya tıklayarak »

 


Daha fazla örnek için

Kenarlık ve boşlukları olan bir görselin paragraf içerisinde sağa yaslanış örneği

Alt yazılı bir görselin sağa yaslanış örneği

Paragrafın ilk harfinin sola yaslanması ve stillendirilmesi örneği

Yatay menü oluşturma

Tablosuz anasayfa oluşturma örneği
Bir web sayfasını tablo kullanmadan oluşturma örneği


Tüm CSS Float Özelliği ve Değerleri

CSS sütunundaki sayılar CSS sürümüne işaret etmektedir. (CSS1 veya CSS2).

Özellik Tanım Değer CSS
clear Yaslanan elementlerin hangi tarafının temiz kalacağını belirtir. left
right
both
none
inherit
1
float Bir kutu niteliğindeki elementin ne tarafa yaslanıp yaslanmayacağını dahi belirler. left
right
none
inherit
1

 

İçerik kaynağı düzeni; W3Schools

Anlatım ve derleme; Ne Fark Eder ki!

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan Css Dersleri Bölüm 17 Konumlandırma (positioning) başlıklı makalemizde absolute, css dersleri ve fixed hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious