CSS Dersleri 23 - Float ve Clear Kullanımı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Float ve Clear Özelliğini öğreneceğiz.

CSS'de "float" özelliği, bir etiketin nasıl yaslanması ve konumlanması gerektiğini belirtir.Float özelliği, içeriğin konumlandırılması ve biçimlendirilmesi için kullanılır, örneğin bir resmin bir kapsayıcıdaki metnin soluna kaymasına izin verir.

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

  • left- Etiket, kapsayıcısının soluna yaslanır.
  • right- Etiket, kapsayıcısının sağınay yaslanır.
  • none - Etiket bir tarafa yaslanmaz. Varsayılan değeridir.
  • inherit- Etiket, üst etiketin float değerini devralır
img {
  float: right;
}

CSS Clear Kullanımı

CSS'de "clear" özelliği, hangi etiketin yaslanan etiketin yanında ve hangi tarafta yaslanabileceğini belirtir.Float özelliğinin etkisinden kurtulmak için clear özelliğini kullanırız. Float uygulanmış etiketten sonra gelen etiketleride etkiler bu etkiden kurtulmak için clear özelliği kullanılır.Clear özelliğini kullanmanın en yaygın yolu, bir etiket üzerinde float özelliğini kullandıktan sonradır.

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
}

.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Clear Olmadan</h2>
<div class="div1">div1</div>
<div class="div2">div2 - HTML kodunda div2'nin div1'den sonra olduğuna dikkat edin. Bununla birlikte, div1 sola kaydığı için, div2'deki metin div1 etrafında akar.</div>
<br><br>

<h2>Clear Varken</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Burada clear:left özelliği, div4'ü kayan div3'ün altına taşır. "Left" değeri, sola kayan öğeleri temizler. Ayrıca "right" ve "both" de temizleyebilirsiniz.</div>

</body>
</html>

CSS clearfix Hack

Bir etiket, kendisini içeren etiketten daha uzunsa ve genişletilmişse, alanının dışına "taşar" ve bunu overflow:auto diyerek çözebiliriz.Ama bu taşmaların genişlik ve yükseklik oranları doğru ayarlamazsak bazı ekranlarda yine kaydırma çubuklarını görebiliriz.Bununla birlikte, yeni modern clearfix hack'in kullanımı daha güvenlidir ve çoğu web sayfası için aşağıdaki kod kullanılır:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

CSS Float Örnekleri

Kutu Izgarası / Eşit Genişlikli Kutular

Float özelliği ile içerik kutularını yan yana yaslamak kolaydır:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Izgara Düzeni</h2>
<p>Kutuları yan yana kaydırın:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>Kutu İçeriği</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>Kutu İçeriği.</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>Kutu İçeriği.</p>
  </div>
</div>

<p>Ayrıca düzen akışıyla ilgilenmek için clearfix hack'i kullandığımızı ve kutunun fazladan dolgu nedeniyle kırılmamasını sağlamak için kutu boyutlandırma özelliğini eklediğimizi unutmayın. Etkisini görmek için bu kodu kaldırmayı deneyin.</p>

</body>
</html>

Yan Yana Resimler

Kutu ızgarası, resimleri yan yana görüntülemek için de kullanılabilir:

* {
  box-sizing: border-box;
}

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla