Css Floating - Css Dersleri

[VexraDev]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

Css floating ile nesnelerin bir biri ardına nasıl hizalandığını öğrenelim.Bu hizalama işleminden sonra çıkan sorunu ise clearfix ya da overflow ile düzeltiyoruz.

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.


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.

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

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

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

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

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>

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