CSS FLOAT Ve CLEAR Özelliği Kullanımı

Başlangıçta, web sayfasının öğelerini, html kodunda tanımlanan sırayla birbiri ardına yerleştirilir. Sayfadaki paragraf, başlık, liste vb... Etiketlerini yerleştirerek, bunları aynı sırayla görüyoruz. Fakat css'in bazı özelliklerinin yardımıyla bu düzeni değiştirebiliriz. Onlardan bir tanesi float özelliğidir.

Float kelimsenin Türkçe karşılığı "Şamandıra" , şamandıra kelime anlamı olarak yüzer cisim anlamına gelir. Float özelliği, bir kutunun (bir öğe) yüzülüp yüzmeyeceğini belirtir ve birbirine bitişik bloklar oluşturmak mümkündür. Float özelliği, bir öğeyi normal akışın dışına çıkarmanıza ve içeriği yan yana dizmenize olanak tanır. Elemanlar yatay olarak yüzer , yani bir eleman yalnızca sol ve sağ tarafında bulunması gerektiğini ve bununla birlikte metin ve satır içi öğelerin etrafına sarılmasını sağlar.

Not : Kesinlikle yerleştirilmiş öğeler float özelliğini yoksayar!

Not : Yüzen bir öğeden sonra bulunan öğeler çevrede dolaşacaktır. Bunu önlemek için clear özelliğini kullanın (sayfanın altındaki örneklere bakın).

CSS Sözdizimi :

Değerler :

• left :Element solda yer alır.
• right :Element sağda yer alır.
• none :Element oluştuğu yerde görüntilenir. Varsayalı değerdir.
• inherit :Element, üst float değerini devralır.

Float özelliğinin en basit kullanımı, metinleri resimlerin etrafına sarmak için kullanılabilir.

float:right;

Aşağıda ki örnekte bir metinin sola bir resmin sağa yaslanmasını gösterir.

HTML :

<p><img src="agac.jpg"/> Lorem Ipsum, dizgi ve baskı endüstrisinde
kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir 
hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı
1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. 
Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden
elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren
Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi
Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile 
popüler olmuştur.</p>

CSS :

img{
     float:right;
   }

float:left;

Aşağıda ki örnekte bir resmin sola yaslanmasını bir metninde sağa yaslanmasını gösterir.

img{
     float:left;
   }

float:none;

Aşağıdaki örnekte, resim ve metnin normal akışında bulunduğu yerde görüntülenecektir float: none;

img{
     float:none;
   }

Kutuları Yan Yana Dizmek

İki kutu oluşturalim birini sola birini sağa yaslayalım.

HTML :

 <div class="kutu"></div>
 
 <div class="kutu1"></div>
 

CSS :

div{width:100px; 
   
    height:100px; 
   
    background-color:blue;
   
    }
.kutu{float:left}
  
.kutu1{float:right}

Kutular oluşturalım ve sola yaslıyarak, kutuları dizelim.

HTML :

<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>

CSS :

div{width:150px;
  
    height:150px;
   
    background-color:blue;
   
    margin:10px;
  }
.kutu{float:left}   
  

Kutular yan yana dizerken kutular sayfaya sığmazsa bir alt satıra geçer.

İki kutuyu sola ve bir kutuyu sağa yaslıyalım ortaya metin ekleyelim.

HTML :

<section>
  <div class="left">1</div>
  
  <div class="left">2</div>
  
  <div class="right">3</div>
  
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. 
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak 
üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı 
sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle 
kalmamış, aynı zamanda pek değişmeden elektronik dizgiye desıçramıştır.</p>
  
</section>

CSS :

  section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float: left;
  background:#6495ED;
}

.right {
  float: right;
  background:#008080;
}

Clear Özelliği

Css'de clear özelliği float özelliğini iptal etmek için kullanılır bu sayede sitemizin kodları normal akışını girer.

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

• none :Her iki tarafta yüzen öğelere izin verir. Bu varsayılan değer
• left :Soldaki akışı iptal eder.
• right :Sağdaki akışı iptal eder.
• both :Sol ve sağ tarafların akışını iptal eder.
• inherit :Eleman, üst öğesinin değerini devralır.

CSS Sözdizimi:

CSS :

div {
    clear:both;
}

CSS Float hatası ve çözümü clearfix Hack

Bir eleman onu içeren elemandan daha uzunsa ve float verilmiş elemansa, kabın dışına taşacaktır.

DIV elemana overflow:auto; css özelliğini eklersek sorunu çözeriz.

HTML :

<div  class="clearfix">

<img class="img" src="agac.jpg" alt="ağaç">

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, 
adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı 
galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler 
olarak kullanılmıştır.</div>

CSS :

  div {
      border: 3px solid #4CAF50;
      padding: 5px;
      }
    
  img {
      float: right;
      } 
  .clearfix {
    overflow: auto;
    }  

overflow:auto temizleme düzeltmesi, kenar boşluklarınızı ve dolguyu kontrol altına alabildiğiniz sürece iyi çalışır (başka şekilde kaydırma çubuklarını görebilirsiniz). Yeni ve modern kod olarak Clearfix kullanımı daha güvenlidir, ve aşağıdaki kod örneği çoğu web sayfaları için kullanılır:

CSS :

.clearfix::after {

    content: "";
  
    clear: both;
  
    display: table;
}

Bir element üzerinde display: flow-root'u kullanmak, bu temizlemeyi bizim için yapar. Clearfix hack komutunu uygulamak yerine, class'ımızda CSS display özelliğini flow-root değeriyle kullanabilirsiniz.

CSS :

.clearfix{

         display: flow-root;

        }
 

Not :Yukarıda ki css kodu ie11 ve modern tarayıcılar destekler.

position: relative;
margin: auto;