Css Floating

Css' de float özelliği nesneleri hizalamak için kullanılır.

Örneğin 3 div etiketi oluşturalım ve her bir div için bazı css kodları oluşturalım.

<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>

.box {
	width: 150px;
	height: 150px;
	margin: 2px;
}
#first {
	background: red;
}
#second {
	background: blue;
}
#third {
	background: green;
}

** <div> etiketleri block etiket olduğundan dolayı her bir kutu alt alta gelir.

Örnek 1 için için tıklayınız.

Kutuları yan yana getirmek için float özelliğini kullanalım.

#first {
	background: red;
    float:left;
}
#second {
    background: blue;
    float:left;
}
#third {
    background: green;
    float:left;
}

Her bir kutu için verdiğimiz float:left; özelliği kutuları sola doğru bir biri ardına hizalar.

Örnek 2 için için tıklayınız.

float : left : right : none; şeklinde 3 değer alabilir.

** Float olan bir nesne normal akışın dışına çıkar bunu göstermek için bir container isminde bir div ekleyelim ve tüm div etiketlerini çevrelesin.

<div id="container">
   <div id="first" class="box"></div>
   <div id="second" class="box"></div>
   <div id="third" class="box"></div>
</div>

ve bu container için bir css kodu ekleyelim.

#container{
  background:yellow;
}

Örnek 3 için için tıklayınız.

Bu durumda tüm kutuları çevreleyen container div' inin arka zemin renginin sarı olmasını bekleriz ancak sarı renk görünmez. Bunu kontrol etmek için float:left; özelliğini kaldırabilirsiniz bu durumda sarı renk tüm div leri çevreler ve görünür hale gelir ancak burada float:left; ile birlikte sarı rengin görünmez olması float özelliğini alan nesnenin normal akış dışına çıkmasından kaynaklanıyor.

Peki container div' i için verdiğimiz zemin nasıl görünür hale gelir ?

Bunun iki yöntemi var;

1. Yöntem overflow:auto; ile taşmaların görünür hale getirilmesi.

<div id="container" class="clear">
   <div id="first" class="box"></div>
   <div id="second" class="box"></div>
   <div id="third" class="box"></div>
</div>

.clear{
  overflow:auto;
}

Örnek 4 için için tıklayınız.

2. Yöntem ise clear yöntemiyle floating işlemini temizlemek. Bu durumda normal akış dışına çıkan nesnelerden sonra bir clear işlemi yapmalıyız.

gene aynı şekilde eklediğimiz .clear sınıfı ile aşağıdaki css kodu eklemeliyiz.

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

Örnek 5 için için tıklayınız.

Burada pseudo element kullanarak .clear ile ulaşmış olduğumuz etiketin hemen ardına bir alan varmış gibi düşünüp bu alan için bir temizleme işlemi yaptığımıza dikkat ediniz.

Peki sarı rengin olup olmaması bize neden sorun teşkil ediyor ? Clear yapmadığımızda sarı renk görünmezken clear kullandığımızda sarı renk geliyor. Burada sorun diye bahsettiğimiz işlemi bir örnek üzerinde daha görelim.

<div id="container">
   <div id="header"></div>
   <div id="leftmenu"></div>   
   <div id="content"></div>
   <div id="footer"></div>  
</div>

** Burada leftmenu ve content kısmını aynı satırda yan yana olmasını istiyorum. Dolayısıyla float:left; ile yan yana getireceğiz.

#container{
  width:800px;
}

#header{
  background-color:red;
  height:100px;
}

#leftmenu{
  width:30%;
  height:200px;
  float:left;
  background-color:green;
}

#content{
  width:70%;
  height:200px;
  float:left;
  background-color:blue;
}

#footer{
  background-color:orange;
  height:100px;
}

Örnek 6 için için tıklayınız.

2 <div> içinde kullandığımız float:left; özelliğinden dolayı footer div' inin arka plan renginin görünmediği dolayısıyla bir clear işlemi yapmam gerektiğini bilmem gerekiyor. Yani <div id="content"> 'in hemen ardına bir clear eklememiz gerekiyor.

Peki clear işlemini nerede yapacağız ?

<div id="container">
   <div id="header"></div>
   <div id="content-container" class="clear">
     <div id="leftmenu"></div>   
     <div id="content"></div>
   </div>
   <div id="footer"></div>  
</div>

Örnek 7 için için tıklayınız.

2 <div> etiketini bir kapsam içine alıp bu kapsamın hemen ardına bir clear işlemi uygulayabilirim. Bu durumda <div id="footer"> 'in göründüğünü örnek üzerinden inceleyiniz.

Ya da bir farklı şekilde float temizleme işlemi yapabiliriz.

<div id="container">
   <div id="header"></div>  
   <div id="leftmenu"></div>   
   <div id="content"></div>
   <div class="clear">
   <div id="footer"></div>  
</div>

.clear {
    clear: both; 
}

Örnek 8 için için tıklayınız.