CSS Floats

Aslen metin blokları içindeki görüntüleri kaydırmak için kullanılan float özelliği, web sayfalarında çoklu sütun düzenleri oluşturmak için en sık kullanılan araçlardan biri haline geldi. Bu makalede açıklandığı gibi, flexbox ve grid’in ortaya çıkmasıyla birlikte artık asıl amacına geri döndü.

Float’ların arka planı

float özelliği, web geliştiricilerinin bir metin sütunu içinde kayan bir görüntüyü içeren basit düzenleri uygulamalarına olanak tanımak için tanıtıldı. Böylece metinler bunun soluna veya sağına sarılabilecekti. Bir gazete mizanpajında görebileceğiniz türden bir şey.

Ancak web geliştiricileri, yalnızca görüntüleri değil, her şeyi kaydırabileceğinizi kısa sürede fark etti, bu nedenle kaydırma kullanımı, örneğin açılır kapanır kapaklar gibi eğlenceli düzen efektlerine kadar genişledi.

Kaydırmalar genellikle birden fazla bilgi sütununun yan yana duracak şekilde kaydırıldığı web sitesi düzenlerinin tamamını oluşturmak için kullanılır (varsayılan davranış sütunların kaynakta göründükleri sırayla birbirlerinin altında durmasıdır). Ancak, daha yeni ve daha iyi düzen teknikleri mevcuttur. Bu şekilde kayan sütunların kullanılması eski bir teknik olarak kabul edilmelidir.

Bu makalede sadece floatların doğru kullanımlarına odaklanacağız.

Basit bir float örneği

Float kullanımını keşfedelim. Bir metin bloğunu bir öğenin etrafında kaydırmayı içeren basit bir örnekle başlayacağız. Bilgisayarınızda yeni bir index.html dosyası oluşturarak, basit bir HTML şablonuyla doldurarak ve aşağıdaki kodu uygun yerlere ekleyerek takip edebilirsiniz. Bölümün altında, nihai kodun nasıl görünmesi gerektiğine dair canlı bir örnek görebilirsiniz.

İlk olarak, basit bir HTML ile başlayacağız. HTML gövdenize aşağıdakileri ekleyin ve daha önce içinde olan her şeyi kaldırın:

<h1>Simple float example</h1>

<div class="box">Float</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>

<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

Şimdi aşağıdaki CSS’yi HTML’nize uygulayın (bir <style> öğesi veya ayrı bir .css dosyasına bir <link> kullanarak – seçim sizin):

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

Kaydedip yenilediğinizde, beklediğinize çok benzer bir şey göreceksiniz: kutu, normal akışta metnin üzerinde duruyor.

Kutuyu kaydırmak

Kutuyu kaydırmak için .box kuralına float ve margin-right özelliklerini ekleyin:

.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

Şimdi kaydedip yenilediğinizde aşağıdaki gibi bir şey göreceksiniz:

Floatın nasıl çalıştığını düşünelim. Üzerinde float ayarı olan öğe (bu durumda öğesi) belgenin normal düzen akışından çıkarılır ve ana konteynerinin (bu durumda ) sol tarafına yapıştırılır. Normal düzen akışında kayan öğenin altına gelecek olan herhangi bir içerik şimdi bunun yerine etrafını saracak ve kayan öğenin üst kısmına kadar sağ tarafındaki alanı dolduracaktır. Orada duracaktır.

İçeriği sağa kaydırmak da tam olarak aynı etkiyi yaratır, ancak tersi geçerlidir: kaydırılan öğe sağa yapışır ve içerik sola doğru etrafını sarar. Sonucun ne olduğunu görmek için float değerini right olarak değiştirmeyi ve son kural setinde margin-right’ı margin-left ile değiştirmeyi deneyin.

Floatın görselleştirilmesi

Metni uzaklaştırmak için floata bir kenar boşluğu ekleyebilsek de, floattan uzaklaştırmak için metne bir kenar boşluğu ekleyemeyiz. Bunun nedeni, kayan bir öğenin normal akıştan çıkarılması ve aşağıdaki öğelerin kutularının aslında kayan öğenin arkasında çalışmasıdır. Örneğinizde bazı değişiklikler yaparak bunu görebilirsiniz.

Kayan kutunun hemen ardından gelen ilk metin paragrafına special sınıfı ekleyin, ardından CSS’nize aşağıdaki kuralları ekleyin. Bunlar aşağıdaki paragrafımıza bir arka plan rengi verecektir.

.special {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}

Efekti daha kolay görebilmek için, float’ınızdaki margin-left değerini margin olarak değiştirin, böylece float’ın etrafında boşluk elde edersiniz. Aşağıdaki örnekte olduğu gibi, kayan kutunun hemen altından geçen paragrafın arka planını görebileceksiniz.

Aşağıdaki öğemizin satır kutuları kısaltılmıştır, böylece metin kayan çizginin etrafında ilerler, ancak kayan çizgi normal akıştan çıkarıldığı için paragrafın etrafındaki kutu hala tam genişlikte kalır.

Floatın temizlenmesi

Bir floatın normal akıştan çıkarıldığını ve diğer öğelerin onun yanında görüntüleneceğini gördük. Aşağıdaki öğenin yukarı hareket etmesini durdurmak istiyorsak, onu temizlememiz gerekir; bu da clear özelliği ile gerçekleştirilir.

Önceki örnekteki HTML’nizde, kayan öğenin altındaki ikinci paragrafa cleared sınıfı ekleyin. Ardından CSS’nize aşağıdakileri ekleyin:

.cleared {
  clear: left;
}

İkinci paragrafın artık kayan öğeyi temizlediğini ve artık yanına gelmediğini görmelisiniz. clear özelliği aşağıdaki değerleri kabul eder:

• left: sola kayan öğelerdeki floatı temizler
• right: sağa kayan öğelerdeki floatı temizler
• both: Sola veya sağa kayan tüm öğeleri temizler

Bir float etrafına sarılmış kutuları temizleme

Artık kayan bir öğenin ardından gelen bir şeyi nasıl temizleyeceğinizi biliyorsunuz, ancak her iki öğenin etrafına bir kutu sarılmış uzun bir kayan öğeniz ve kısa bir paragrafınız varsa ne olacağını görelim.

Problem

Belgenizi, ilk paragraf ve kayan kutu, wrapper sınıfına sahip bir
ile birlikte sarılacak şekilde değiştirin.

<div class="wrapper">
  <div class="box">Float</div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
</div>

CSS’nize .wrapper sınıfı için aşağıdaki kuralı ekleyin ve ardından sayfayı yeniden yükleyin:

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}

Ayrıca, orijinal .cleared sınıfını da kaldırın:

.cleared {
  clear: left;
}

Tıpkı paragrafa arka plan rengi koyduğumuz örnekte olduğu gibi, arka plan renginin kayan yazının arkasında kaldığını göreceksiniz.

Bir kez daha, bunun nedeni floatın normal akıştan çıkarılmış olmasıdır. Aşağıdaki öğenin temizlenmesi daha önce olduğu gibi çalışmayacaktır. Bu, kutunun kayan öğenin etrafına ve kayan öğenin etrafına sarılan ilk paragrafın metnine birlikte sarılmasını ve aynı zamanda aşağıdaki içeriğin kutudan temizlenmesini istiyorsanız bir problem oluşturur. Bununla başa çıkmanın üç olası yolu vardır, bunlardan ikisi tüm tarayıcılarda çalışır – ancak biraz zahmetlidir – ve bu durumla düzgün bir şekilde ilgilenen üçüncü, daha yeni bir yol bulunur.

Clearfix hilesi

Bu durumla geleneksel olarak başa çıkmanın yolu “clearfix hack” olarak bilinen bir şeyi kullanmaktır. Bu yöntemde, önce hem float hem de etrafına sarılmış içerik içeren kutudan sonra bazı oluşturulmuş içerikler eklenir, ardından bu oluşturulmuş içerik her ikisini de temizleyecek şekilde ayarlanır.

Örneğimize aşağıdaki CSS’yi ekleyin:

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

Şimdi sayfayı yeniden yükleyin. Kutu temizlenmelidir.Bu aslında, öğelerin altına
gibi bir HTML öğesi eklemiş ve bunu clear: both olarak ayarlamış olmanızla aynıdır.

overflow kullanımı

Alternatif bir yöntem, sarmalayıcının overflow özelliğini visible dışında bir değere ayarlamaktır.

Son bölümde eklediğiniz clearfix CSS’yi kaldırın; bunun yerine wrapper kurallarına overflow: auto ekleyin. Bir kez daha, kutu temizlenmelidir.

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

Bu örnek, blok biçimlendirme bağlamı (BFC) olarak bilinen şeyi oluşturarak çalışır. Bu, sayfanızın içinde her şeyin yer aldığı mini bir düzen gibidir. Bu, kayan öğemizin BFC’nin içinde yer aldığı ve arka planın her iki öğenin de arkasında çalıştığı anlamına gelir. Bu genellikle işe yarar; ancak bazı durumlarda taşma kullanımının istenmeyen sonuçları nedeniyle istenmeyen kaydırma çubukları veya kırpılmış gölgelerle karşılaşabilirsiniz.

display: flow-root

Bu sorunu çözmenin modern yolu, display özelliğinin flow-root değerini kullanmaktır. Bu sadece hack kullanmadan bir BFC oluşturmak için vardır – kullandığınızda istenmeyen sonuçlar olmayacaktır. .wrapper kuralınızdan overflow: auto öğesini kaldırın ve display: flow-root öğesini ekleyin. Destekleyen bir tarayıcınız olduğunu varsayarsak, kutu temizlenecektir.

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

Özet

Artık modern web geliştirmede floatlar hakkında bilmeniz gereken her şeyi biliyorsunuz. Eskiden nasıl kullanıldıkları hakkında bilgi için eski düzen yöntemleri makalesine bakın; bu, kendinizi eski projeler üzerinde çalışırken bulursanız yararlı olabilir.