CSS Float Kullanımı – Ahmet Cansever
CSS WEB TASARIMI

CSS Float Kullanımı

Tarafından yazılmıştır AhmetC

Hazırladığımız web sayfalarında sayfa düzeni ve konumlandırması için CSS’ te float özelliği kullanılır. Sayfa yapısı içinde kullanılan öğelerin sola yada sağa yaslanması bu özellik ile sağlanabilir.

float: left  Öğeleri sola yaslamak için;

float: right Öğeleri sağa yaslamak için kullanılır.

Clear Özelliği

float özelliği uygulanan öğe kendinden sonra gelen öğeleri de etkilemesi CSS’in sunduğu bir avantajdır. Ancak bir noktadan sonra bu avantajı kullanmak istemeyebiliriz. İşte tam bu noktada clear özelliğini kullanarak float’ın sayfa akışı içinde yarattığı etkiyi kaldırabiliriz. Alabileceği değerler;

  • none : Bu varsayılan değerdir.
  • left : Sola yaslama (float : left) sonucu değişen akışı normale döndürür.
  • right : Sağa yaslama (float : right) sonucu değişen akışı normale döndürür.
  • both : Sola veya sağa yaslama (float : left / right) sonucu değişen akışı normale döndürür.
  • inherit : Özellik üst öğenin değerini devralır.

Aşağıdaki örneği inceleyelim. Örneğimizde sayfamıza 1 adet resim ve 1 paragraf ekleyeceğiz.

Sayfamızı görüntüleyelim.

Şimdi sayfamızdaki akışı değiştirecek şekilde <img> etiketine float:left özelliği verelim.

Ekran çıktısı:

Şimdi diğer örneğimize bakalım. Bu örneğimizde float:left ve float:right özelliğini birlikte aynı sayfada kullanalım.

index.html sayfamız;

style.css dosyamız;

Ekran Çıktısı:

Yorum Yap