CSS Yüzeyle Kaydırma

Yüzdücü çubuklar sola veya sağa doğru hareket edebilir, hatta dış kenarı içeren çubuk veya diğer yüzdücü çubukun kenarına çarparak durur.

Yüzdücü çubuk belgenin normal akışında olmadığı için, belgenin normal akışındaki blok çubuklar, yüzdücü çubuk gibi görünmez.

CSS Yüzeyle Kaydırma

Aşağıdaki resmi dikkatlice inceleyin, çubuk 1 sağa doğru yüzdüğünde, belge akışından ayrılır ve sağa doğru hareket eder, hatta sağ kenarının içeren çubuğun sağ kenarına çarpmasına kadar:

CSS Yüzeyle Kaydırma Örneği - Sağa Kaydırılan Eleman

Aşağıdaki resmi dikkatlice inceleyin, çubuk 1 sola doğru yüzdüğünde, belge akışından ayrılır ve sola doğru hareket eder, hatta sol kenarının içeren çubuğun sol kenarına çarpmasına kadar. Artık belge akışında olmadığı için, yer kaplamaz, aslında çubuk 2'yi kaplar, çubuk 2'nin görünümünden kalkar:

Eğer üç çubuğu da sola doğru hareket ettirirseniz, çubuk 1 sola doğru yüzdü, içeren çubuğa çarpar, diğer iki çubuk da önceki yüzdücü çubuğa çarpar:

CSS Yüzeyle Kaydırma Örneği - Sola Kaydırılan Eleman

Aşağıdaki resimde gösterildiği gibi, içeren çubuk çok dar olduğunda, üç yatay sıralı yüzdücü elemanı barındıramazsa, diğer yüzdücü bloklar aşağıya doğru hareket eder, yeterli yer olduğunda durur. Eğer yüzdücü elemanların yükseklikleri farklıysa, aşağıya doğru hareket ederken diğer yüzdücü elemanlar tarafından 'kilitlenme' olabilir:

CSS Yüzeyle Kaydırma 2 - Sola Kaydırılan Eleman

CSS float Özelliği

CSS'te, elemanların yüzdümesini float özelliği ile sağlarız.

float özelliği hakkında daha fazla bilgi için referans el kitabını ziyaret edin:CSS float Özelliği。

Satır çubuğu ve temizleme

Yuvarlak çubuğun yanındaki satır çubuğu kısaltılır, böylece yuvarlak çubuğa yer açılır ve satır çubuğu yuvarlak çubuğu etrafında dolaşır.

Bu nedenle, yuvarlak çubuğu oluşturmak, metnin resim etrafında dolaşmasını sağlar:

Satır Çubuğu, Yüzeyle Kaydırılan Çubuğu Yarıt

Yapışkanlık çubuğunu durdurmak için, bu çubuğa uygulama yapmanız gerekiyor clear özelliğiclear özelliğinin değeri left, right, both veya none olabilir, bu da kutunun hangi kenarlarının yatay kaydırma kutusuna dokunmamasını ifade eder.

Bu etkisini elde etmek için, temizlenen elementindikey dış kenar boşluğuYeterli boşluk ekleyerek, elementin üst kenarı yatay kaydırma kutusunun altına dikey olarak düşer:

clear Özelliği Örneği - Satır Çubuğuna clear Uygulama

Bu, etrafındaki elementlerin yatay kaydırma elementine yer ayırmalarını sağlayan bir araçtır.

Bu, etrafındaki elementlerin yatay kaydırma elementine yer ayırmalarını sağlayan bir araçtır.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Bu durumda, bir sorun ortaya çıktı. Çünkü yatay kaydırma elementi belge akışından ayrıldı, bu yüzden resim ve metni saran div, yer kapmaz.

Yaklaşan elementin görsel olarak yatay kaydırma elementini sarmamasını nasıl sağlarız? Bu elementin bir yerinde clear:

clear Özelliği Örneği - Boş Elemana Temizlik Uygulama

Ne yazık ki, yeni bir sorun ortaya çıktı, çünkü mevcut bir temizleme elementi yok, bu yüzden sadece bir boş element ekleyip onu temizlemek zorundayız.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

Bu, beklediğimiz etkileri elde etmemizi sağlar, ancak ekstra kod eklememiz gerekebilir. Çoğu zaman, clear özelliği uygulayabilecek elementler vardır, ancak bazen düzen için anlamsız etiket eklemek zorunda kalabiliriz.

Ancak, başka bir yöntem de var, bu da div konteynerine yatay kaydırma uygulamaktır:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Bu, beklediğimiz etkileri elde etmemizi sağlar. Ne yazık ki, bir sonraki element, bu yatay kaydırma elementinden etkilenebilir. Bu sorunu çözmek için, bazıları düzen içinde her şeyi yatay kaydırma yapmayı ve ardından uygun anlamlı elementleri (genellikle sitenin alt kısmı) bu yatay kaydırmaları temizlemek için seçer. Bu, gereksiz etiketlerin azaltılmasını veya ortadan kaldırılmasını sağlar.

Aslında, CodeW3C.com sitesindeki tüm sayfalar bu teknolojiyi kullanıyor. CSS dosyasını açtığınızda, sayfa altındaki div'leri temizlediğimizi ve sayfa üzerindeki üç div'in sağa yatay kaydırdığını göreceksiniz.

CSS clear Özelliği

Biz daha önce CSS temizleme işlevinin çalışma prensibi ve clear özelliği uygulama yöntemlerini ayrıntılı olarak tartıştık. Eğer clear özelliği hakkında daha fazla bilgi öğrenmek istiyorsanız, referans el kitabını ziyaret edin:CSS clear Özelliği。

Yüzeyle Kaydırma ve Temizleme Örneği

float Özelliğinin Basit Uygulaması
Bir paragrafın sağ tarafına görsel kaydırma.
Kenarlı ve Sınırlı Görseli Paragrafın Sağ Tarafına Kaydırma
Paragrafın sağ tarafına görsel kaydırın. Görselere çerçeve ve sınırlar ekleyin.
Başlıklı Görsel Sağa Kaydırma
Başlıklı görseli sağa kaydırın.
Paragrafın Baş Harfini Sol Kenara Kaydırma
Paragrafın baş harfini sol kenara kaydırın ve bu harfe stil ekleyin.
Yatay Menü Oluşturma
Tek sütunlu bağlantı içeren yüzeyle kaydırma kullanarak yatay menü oluşturma.
Tablosuz Baş Sayfa Oluşturma
Başlık, alt başlık, sol dizin ve ana içerik içeren bir baş sayfa oluşturmak için yüzeyle kaydırma kullanın.
Temizleme Elemanının Yanı
Bu örnek, kenarındaki yüzeyle kaydırılan elemanları nasıl temizleyeceğinizi gösterir.