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 :

 

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 :

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.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9548

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.