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 :

float: none | left | right | initial | inherit;

Değerler :

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:

CSS Sözdizimi:

clear: both | left | right | none | inherit;

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.

Mehmet Furkan Dalfidan 23/09/2020

Clear floatın etkisini kaldırıyorsa float:none da aynı işlevi görmez mi görüyorsa neden kullanılmıyor?

yönetici 26/09/2020

Mehmet, kullanılmaz none, yok demektir. float'ın özelliklerini sıfırlar.

Berfin Sezer 08/03/2021

display:flex ile yan yana getiremediklerimi float:left ile getirdim şimdi ortalamaya çalışıyorum margin:auto dedim fakat olmadı ne yapabilirim

yönetici 11/03/2021

Berfin, şunları dene: Kutulara width özelliği vermediysen tarayıcı hesaplamayadığı için ortalamaz. width özelliği ver dene. Birde position:relative ver dene.

position: relative;
margin: auto;

css div ortalama diye google'dan aratmalar yap.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

7379

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.