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:

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:

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:

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).

İçerik kaynağı düzeni; W3Schools

Anlatım ve derleme; Ne Fark Eder ki!