CSS Float Kullanımı

CSS float özelliği web sayfalarında konulandırma ve düzen için kullanılır. Bir öğenin sayfa akışı içinde hangi yöne yaslanması gerektiğini ifade eder. Ancak bunu yaparken öğelerin görüntülenme varsayılanlarını (blok veya satır içi) etkiler, sayfa akışını değiştirir. Bir HTML öğesi float özelliği aldığında, öğeyi sayfa akışından çıkarır. Diğer öğeler ise float uygulanan öğenin varlığını görürerek etrafından akışına devam eder. Bu çok yönlü çalışma şekli sayesinde oldukça fazla kullanım şekli ve alanı vardır. Alabileceği dört farklı değer vardır;

left
right
none
inherit

float : left ; Kullanımı

float : left Özelliği uygulanan öğe, sayfa akışını bozarak sola yaslanır.

Örnek;

Aşağıdaki örneğimizde resim sola yaslanmış ve içerik metni onun etrafında kalacak şekilde yazılmıştır.


<!DOCTYPE html>
<html>
<head>
<style>
    img {
        float: left;
        width: 150px;
        height: 150px;
        margin-right: 15px;
        
    }
</style>
</head>
<body>

<h1>CSS float Örnekleri</h1>

<p><img src="yazilimbilisim-logo.png" alt="yazilimbilisim.net">
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>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

img {

float: left;

width: 150px;

height: 150px;

margin-right: 15px;

}

</style>

</head>

<body>

<h1>CSS float Örnekleri</h1>

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>

</body>

</html>

Örnek ;

Sayfa üzerinde bulunan kutular yan yana dizilmiştir.


<!DOCTYPE html>
<html>
<head>
<style>
    div{
        float: left;
        margin: 10px;
        width: 100px;
        height: 50px;
        background-color: olivedrab;        
    }
</style>
</head>
<body>

    <h1>CSS float Örnekleri</h1>

    <div></div>
    <div></div>
    <div></div>
    <div></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

float: left;

margin: 10px;

width: 100px;

height: 50px;

background-color: olivedrab;

}

</style>

</head>

<body>

<h1>CSS float Örnekleri</h1>

</body>

</html>

Örnek ;

float left kullanarak <li> öğeleri ile yatay menüler yapabilirsiniz.


<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">PHP</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover {

background-color: #111;

}

</style>

</head>

<body>

<ul>

<li><a href="#">JavaScript</a></li>

</ul>

</body>

</html>

float : right; Kullanımı

float : right Özelliği uygulanan öğe, sayfa akışını bozarak sağa yaslanır.

Örnek;

Aşağıdaki örneğimizde resim sağa yaslanmış ve içerik metni onun etrafında kalacak şekilde yazılmıştır.


<!DOCTYPE html>
<html>
<head>
<style>
    img {
        float: right;
        width: 150px;
        height: 150px;
        margin-right: 15px;
        
    }
</style>
</head>
<body>

<h1>CSS float Örnekleri</h1>

<p><img src="yazilimbilisim-logo.png" alt="yazilimbilisim.net">
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>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

img {

float: right;

width: 150px;

height: 150px;

margin-right: 15px;

}

</style>

</head>

<body>

<h1>CSS float Örnekleri</h1>

</body>

</html>

Örnek;

Sağa yaslanmış kutular oldukça ilgi çekici olabilir.


<!DOCTYPE html>
<html>
<head>
<style>
    div{
        float: right;
        width: 150px;
        height: 50px;
        color: white;  
        margin: 10px;
        background-color: red;
    }
    p{
        text-align: center;        
    }
    
</style>
</head>
<body>

<h1>CSS float Örnekleri</h1>

    <div><p>Geri</p></div>
    <div><p>İleri</p></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

float: right;

width: 150px;

height: 50px;

color: white;

margin: 10px;

background-color: red;

}

text-align: center;

}

</style>

</head>

<body>

<h1>CSS float Örnekleri</h1>

<div><p>İleri</p></div>

</body>

</html>

float : none; Kullanımı

none Değeri float özelliğinin uygulanmayacağını bildirir. Bir HTML öğesinin float özelliği varsayılan olarak “none” değerindedir.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    div{
        float: none;
        width: 150px;
        height: 50px;
        margin: 10px;
        background-color: red;
    }   
</style>
</head>
<body>

<h1>CSS float Örnekleri</h1>

    <div></div>
    <div></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

float: none;

width: 150px;

height: 50px;

margin: 10px;

background-color: red;

}

</style>

</head>

<body>

<h1>CSS float Örnekleri</h1>

</body>

</html>

clear Özelliği

float özelliği uygulanan öğe kendinden sonra gelen öğeleri de etkilemesi CSS’in sunduğu bir avantajdır. Ancak bir noktadan sonra bu avantajı kullanmak istemeyebiliriz. İşte tam bu noktada clear özelliğini kullanarak float’ın sayfa akışı içinde yarattığı etkiyi kaldırabiliriz. Alabileceği değerler;

none : Bu varsayılan değerdir.
left : Sola yaslama (float : left) sonucu değişen akışı normale döndürür.
right : Sağa yaslama (float : right) sonucu değişen akışı normale döndürür.
both : Sola veya sağa yaslama (float : left / right) sonucu değişen akışı normale döndürür.
inherit : Özellik üst öğenin değerini devralır.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    div{
        width: 150px;
        height: 50px;
        margin: 10px;
        background-color: red;        
    }
    
    .kutu1{
        float: left;        
    } 
    
    .kutu2{
        float: left;        
    }
    .kutu3{
        clear: both;
    }
    
    
</style>
</head>
<body>

<h1>CSS float Örnekleri</h1>

    <div class="kutu1"></div>
    <div class="kutu2"></div>
    <div class="kutu3"></div>
    <div></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

width: 150px;

height: 50px;

margin: 10px;

background-color: red;

}

.kutu1{

float: left;

}

.kutu2{

float: left;

}

.kutu3{

clear: both;

}

</style>

</head>

<body>

<h1>CSS float Örnekleri</h1>

</body>

</html>

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    .div1 {
        float: left;
        width: 100px;
        height: 50px;
        margin: 10px;
        border: 3px solid #73AD21;
    }

    .div2 {
        border: 1px solid red;
    }


    .div3 {        
        width: 100px;
        height: 50px;
        margin: 10px;
        border: 3px solid #73AD21;
    }

    .div4 {
        border: 1px solid red;
    }
    .temizle{
        clear: both;
    }
</style>
</head>
<body>

<h2>clear Kullanılmadan</h2>

<div class="div1">div1</div>
<div class="div2">div2- div2'nin HTML kodunda div1'den sonra olduğuna dikkat edin. Bununla birlikte, div1 sola kayarsa, div2'deki metin div1'in etrafında akar.</div>
<div class="temizle"></div>
<h2>clear Kullanıldı</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Bu div normal akışına geri dönmüş</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid #73AD21;

}

.div2 {

border: 1px solid red;

}

.div3 {

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid #73AD21;

}

.div4 {

border: 1px solid red;

}

.temizle{

clear: both;

}

</style>

</head>

<body>

<h2>clear Kullanılmadan</h2>

<div class="div2">div2- div2'nin HTML kodunda div1'den sonra olduğuna dikkat edin. Bununla birlikte, div1 sola kayarsa, div2'deki metin div1'in etrafında akar.</div>

<h2>clear Kullanıldı</h2>

<div class="div4">div4 - Bu div normal akışına geri dönmüş</div>

</body>

</html>

Örnek ;

Bir şablonu oluşturmak için <div> öğesinden faydalanabilirsiniz.


<!doctype html>
<html>
  <head>
    <title>yazilimbilisim.net</title>
    <style>        
        body{
            margin: 0px;
            padding: 0px;
            background-color: antiquewhite;
        }  
        .sayfa{
            width: 1000px;
            height: 900px;
            margin: 0px auto;            
        }
        .ust{
            height: 250px;;
            background-color:coral;
        }
        .menu{
            height: 80px;
            background-color: green;
        }      
        
        .sol{
            float: left;
            width: 200px;
            height: 500px;;
            background-color: aqua;            
        }
        .sag{
            background-color:dodgerblue;
            height: 500px;
        }
        .temizle{
            clear: both;
        }
        .alt{            
            height: 75px;
            background-color: crimson;
        }      
    </style>
  </head>
<body>
    <div class="sayfa">
        <div class="ust">Üst</div>
        <div class="menu">Menu</div>
        <div class="icerik">
            <div class="sol">Sol</div>
            <div class="sag">Sağ</div>
            <div class="temizle"></div>
        </div>
        <div class="alt">Alt</div>    
    </div>    
</body>
</html>

<!doctype html>

<html>

<head>

<title>yazilimbilisim.net</title>

<style>

body{

margin: 0px;

padding: 0px;

background-color: antiquewhite;

}

.sayfa{

width: 1000px;

height: 900px;

margin: 0px auto;

}

.ust{

height: 250px;;

background-color:coral;

}

.menu{

height: 80px;

background-color: green;

}

.sol{

float: left;

width: 200px;

height: 500px;;

background-color: aqua;

}

.sag{

background-color:dodgerblue;

height: 500px;

}

.temizle{

clear: both;

}

.alt{

height: 75px;

background-color: crimson;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

CSS Float Kullanımı

float : left ; Kullanımı

float : right; Kullanımı

float : none; Kullanımı

clear Özelliği

İlgili

1 Yorum

Yorum Yap X

float : left ; Kullanımı

float : right; Kullanımı

float : none; Kullanımı

clear Özelliği

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum Yap X