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;
}