Css Floating Nedir ? Nasıl Kullanılır ?

nhtctn nhtctn

Float işlemi nesnelerimizi yan yana hizalamamızı sağlayan özelliktir.

Aşağıdaki gibi 3 adet divimiz olmuş olsun.Divler blok etiket olduğundan her biri bir satırı olduğu gibi kapsar yani div’ler burada alt alta gelecek şekilde görünecektir.Float ile bunları yan yana hizalamamız mümkündür.

 <div id="bir" class="kutu"></div>
 <div id="iki" class="kutu"></div>
 <div id="uc" class="kutu"></div>
.kutu{
            margin: 5px;
            width: 200px;
            height: 200px;
        }
        #bir{
            background-color: purple;
            
        }
        #iki{
            background-color: green;
            
        }
        #uc{
            background-color: orange;
            
        }

Yukardaki çıktıda gördüğünüz gibi alt alta geldi div’lerimizi. Şimdi bunları yan yana hizalayalım.

float:left; ile divlerimizi sola doğru hizaladık ve yan yana gelmiş olacaktır.Aşağıda olduğu gibi.

.kutu{
            margin: 5px;
            width: 200px;
            height: 200px;
        }
        #bir{
            background-color: purple;
            float: left;
        }
        #iki{
            background-color: green;
            float: left;
        }
        #uc{
            background-color: orange;
            float: left;
        }

float : left Element solda yer alacaktır.

float: right Element sağda yer alacaktır.

float: none Element olduğu yerde görünür.Varsayılan değerdir.

float : inherit Element üst float değerini devr alır.

 şeklinde 4 değer alabilir.

Şimdi önemli bir noktaya değinelim. Float işlemlerinden sonra div veya başka elementlerimiz normal sayfa akışını bozduğu için (yani alt alt gelmesi gerekirken yan yana getirdik) buna bir clear işlemi uygulamamız gerecektir yani normal akışa getirmek gerekiyor.

Öncellikle bir örnek ile anlatalın neden clear işlemi yapmamız gerektiğini

<div id="kapsayici">
        <div id="bir" class="kutu"></div>
        <div id="iki" class="kutu"></div>
        <div id="uc" class="kutu"></div>
</div>

Yukarıdaki html’de 3 divimizi kapsayan bir div ekledik ve buna arka plan rengi vermeye çalıştık ama ne yazık ki verdiğimizi arka plan rengini kabul etmedi.Bunun nedeni ise div’lerimiz normal akışta olmadığındandır. Clear işlemi ile normal akışa aldıktan sonra renk görünecektir.

        #kapsayici{
            background-color: black;
        }
        .kutu {
            margin: 5px;
            width: 200px;
            height: 200px;
        }

        #bir {
            background-color: purple;
            float: left;
        }

        #iki {
            background-color: green;
            float: left;
        }

        #uc {
            background-color: orange;
            float: left;
        }

Aşağıdaki resimde de gördüğünüz gibi hiç bir değişiklik yok yani arka planımız siyah rengine sahip olmadı.

Bu problemi aşmanın 2 yöntemi vardır.

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

<div id="kapsayici" class="clear">
        <div id="bir" class="kutu"></div>
        <div id="iki" class="kutu"></div>
        <div id="uc" class="kutu"></div>
    </div>
 .clear{
            overflow: auto;
        }

Gördüğünüz gibi siyah arkaplan rengini elde ettik.

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

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.

Şimsi farklı bir örnek daha yapalım.

 <div id="kapsayici">
        <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.

#kapsayici {
            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;
        }

Yukarıdaki örneği yaptığımızda footer divimizin arkaplan rengi görünmeyecektir.Çünkü footer div’inden önce bir float işlemi yapılmıştır bunu temizlemek gerekiyor.Aşağıdaki resim gördüğünüz gibi footer görünmüyor.

Yani <div id=”content”> ‘in hemen ardına bir clear eklememiz gerekiyor.

Leftmenu ve contentmenü divlerimizi kapsayan bir div ekleyerek clearfix::after diyerekten bu kapsamın hemen ardından temizleme işlemi gerçekleştirmesini bildirdik.

<div id="kapsayici">
        <div id="header"></div>
        <div class="kapsayici2 clearfix">
        <div id="leftmenu"></div>
        <div id="content"></div>
        </div>
        <div id="footer"></div>
    </div>
.clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

Göründüğü gibi footer kısmı göründü.

Aşağıdaki işlemde yukarıda yaptığım yönteme benzer bir çözümdür. İkiside aynı sonucu verecektir. Float işlemlerinin çok yapıldığı uygulamalarda yukarıdaki yöntem daha iyi olacaktır.Ekstra her seferinde div eklememize gerek kalmayacaktır aşağıda olduğu gibi.

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

Yorum yazın

BENZER YAZILAR

Css Text Hizalama Nasıl Yapılır ?

Yazılarımızı hizalamak için kullanmamız gereken özelliğimiz text-align 'dır. Aldığı değerler aşağıdaki gibidir. text-align:left; Sola hizalamak için kullanılır. text-align:center;…

13 Haziran 2020