CSS Kaydırma (Float) ve Temizleme (Clear)

CSS Kaydırma ve Temizleme (Float & Clear) Özellikleri genellikle iç içe kullanılırlar. Bu yüzden bu konumuzda bu iki özelliği birlikte ele alıyoruz.

CSS Şubat 15, 2022 0 1150 Okuma Listesine Ekle

CSS Kaydırma (Float) ve Temizleme (Clear)

CSS Kaydırma (Float) Özelliği

kaydırma (float) özelliği, bir elemanın hangi yöne kaydırılacağını ayarlar.

Float özelliği, içeriği konumlandırmak ve biçimlendirmek için kullanılır.

Float özelliği aşağıdaki değerlerden birine sahip olabilir:

left - Öğe, bulunduğu alanın soluna kayar.
right - Öğe, bulunduğu alanın sağınakayar.
none - Öğe, konumunda sabit kalır.
inherit - Öğe, üst öğenin kayan nokta değerini devralır.

float: right;

Aşağıdaki örnek, bir resimin alanın içerisinde bulunan metnin sağına kaydırıldığını göstermektedir.

Örnek:

img {
  float: right;
}

CSS Görsel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

float: left;

Aşağıdaki örnek, bir resimin alanın içerisinde bulunan metnin soluna kaydırıldığını göstermektedir.

Örnek:

img {
  float: left;
}

float: none;

Aşağıdaki örnekte resim, metinde olduğu yerde görüntülenecektir. (Herhangi bir kaydırma işlemine uğramayacaktır.)

Örnek:

img {
  float: none;
}

CSS Temizleme (Clear) Özelliği Nedir?

Kaydırma (float) özelliğini iptal etmek için kullanılır.

Temizleme (clear) özelliği, kaydırılmış bir öğenin yanındaki öğeyle arasında olan ilişkiyi belirler.

CSS Temizleme (Clear) Özelliği

Temizleme (clear) özelliği aşağıdaki değerlerden birine sahip olabilir:

none - Öğe, sol veya sağa kayan öğelerin altına geçer.
left - Öğe, sola kaydırılmış öğelerin altına geçer.
right - Öğe, sağa kaydırılmış öğelerin altına geçer.
both - Öğe, hem sol hem de sağ kaydırılmış öğelerin altına geçer.
inherit - Öğe, üst öğesinden net değeri devralır.

clearfix

Kayan bir öğe, kayan öğeyi kapsayan alandan daha uzunsa, alanın dışına "taşar". Daha sonra bu sorunu çözmek için bir clearfix özelliği kullanılır.

Örnek: