3 beğenilme 0 beğenilmeme
20 gösterim

css float özelliği

CSS float özelliği, en basit ifadeyle HTML elementlerini konumlandırmaya yarar.

Blok düzeyindeki elementlerin varsayılan hizalanma kuralını değiştirmek için uygulanan en önemli CSS yöntemdir.

Blok düzeyindeki elementler, normalde bir HTML belgesinde, genişlikleri ne olursa olsun yeni bir satırdan başlarlar.Yani belgede iki tane blok düzeyinde element varsa, bunlar alt alta hizalanır.

Fakat bazı durumlarda, bu elementlerin aynı satırda, yan yana olması istenebilir.İşte CSS float özelliği blok elementlerin bu varsayılan hizalanma mantıklarını değiştirmek için kullanılır.

Float kaydırma işlemlerini gerçekleştirmek için bazı parametrelerden yararlanır.Bu parametreler CSS de o özelliğin aldığı değerler diye ifade edilir.

css float

Float özelliğinin aldığı değerler : float:left | float:right | float:none | float:inherit

  • Float left : Uygulandığı blok elementi sola yaslar.
    Float right : Uygulandığı blok elementi sağa yaslar.
    Float none : Uygulanan float özelliğini kaldırır.Varsayılan değerdir.
    Float inherit : Parent(ebeveyn) elementinin float özelliğini alır.

Kaydırılan element, sağ ya da soldaki elementin sağından veya solundan başlar. Yeni kaydırılan elementler, ilk önce kaydırılan elementten sonra gelir. Dolayısıyla önceden kaydırılmış elementlerde bir değişiklik olmaz.

Örneğin bir resim için float: right; özelliği belirttiysek yazılar sağ tarafta yer alacak bu resmin solunda yer alacaktır.

Elementleri Yan Yana Sıralamak

Resim galerilerini görmüşsünüzdür.

Resim sayfalarına giden küçük görüntüler sayfada yan yana sıralanırlar.

Bunlar birbirine eşit olmalı ki kaydırıldığında birbiriyle uyumlu olsunlar.

Örnek :

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

css float

Yukarıdaki örnek kodda yer alan özelliğe sahip resimleri sıraladık.

Görüldüğü gibi her biri diğerinin sağına kaydırıldı ve aralara 5x2 (sağ, sol) piksellik boşluk (margin) verildi. Sığmayan nesneler ise bir aşağı satıra kaydırıldı.

Kaydırmayı Sonlandırmak

Css clear:both özelliği

clear:both; kodu artık kaydırmanın sonlandığını ve bundan sonra geçerli olmayacağını bildirmemize yarar.

.clear
   {
      clear: both;
   }

Kaydırmalı bir nesnenin hemen ardından class="clear" kullanılmış bir element yer alıyorsa, bu element kaydırma olayının dışında tutulacak ve normal şekilde sayfaya yerleştirilecektir.

14 Temmuz Css kategorisinde serhat.öcal Uzman Coder (13,350 puan) paylaştı | 20 gösterim

Bu soruya cevap vermek için lütfen giriş yapınız veya kayıt olunuz.

uzmancoder.com'a Hoşgeldiniz. Sitemiz 24.06.2017 tarihinde kurulan bir soru-cevap platformudur.

Siz de aklınıza takılan soruları sorabilir veya diğer sorulara cevaplar yazabilirsiniz.

BU AY EN AKTİF ÜYELER

    96 soru

    81 cevap

    19 yorum

    122 üye

    ×

    Bizi Takip Edin!

    Bumerang - Yazarkafe

    comodo ssl




    96 soru
    81 cevap
    19 yorum
    122 üye