Bu yazımızda Css’te float özelliğini öğreneceğiz. Float özelliği ile Html etiketlerini birbiri ardına hizalayabiliyoruz. Bu hizalama işleminden sonra gelen etiketlerin yerleştirilmesinde bir sorun meydana geliyor.
Bu hatayı ise clearfix veya overflow özellikleri ile çözebiliyoruz.
Float özelliği 3 değer alır. Bunlar;
► left : Sola hizalama yapar.
► right : Sağa hizalama yapar.
► none : Herhangi bir hizalama yapmaz.
Örneğin 3 adet <div> etiketi oluşturalım ve bunlara genişlik, yükseklik ve arkaplan rengi verelim.
Float özelliğini uygulamadan tarayıcıdaki durumuna bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .box{ width:80px; height:80px; margin:5px; } #red{ background-color:red; } #blue{ background-color:blue; } #yellow{ background-color:yellow; } </style> </head> <body> <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="yellow" class="box"></div> </body> </html> |
Gördüğünüz gibi <div> etiketi block bir etiket olduğu için herbiri bulunduğu satırı tamamen kapladı ve alt alta sıralandı.
Burda zaten float varsayılan değeri none olduğu için yazmadım.
Şimdi float özelliğine diğer değerleri uygulayarak değişimi inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .box{ width:80px; height:80px; margin:5px; float:left; } #red{ background-color:red; } #blue{ background-color:blue; } #yellow{ background-color:yellow; } </style> </head> <body> <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="yellow" class="box"></div> </body> </html> |
float : left; özelliği uygulandığında div etiketleri sola doğru yanyana hizalanacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .box{ width:80px; height:80px; margin:5px; float:right; } #red{ background-color:red; } #blue{ background-color:blue; } #yellow{ background-color:yellow; } </style> </head> <body> <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="yellow" class="box"></div> </body> </html> |
float : right; özelliği uygulandığında div etiketleri sağa doğru yanyana hizalanacaktır.
Yukarda bahsettiğimiz sorunun oluşup oluşmadığını tam anlayamamış olabilirsiniz. Bunun için şöyle yapalım.
3 div etiketini kapsayacak şekilde yeni bir div etiketi daha oluşturalım ve içerisine birde h3 etiketi ekleyelim.
Kapsayıcı div’in arkaplan rengini yeşil yapalım.
İlk olarak float özelliğini kullanmadan tarayıcıdaki durumuna bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .box{ width:80px; height:80px; margin:5px; } #red{ background-color:red; } #blue{ background-color:blue; } #yellow{ background-color:yellow; } #container{ background-color:limegreen; } </style> </head> <body> <h3> Kapsayıcı div etiketi içerisinde h3 etiketi ve diğer kutular var.Kapsayıcı div'in arkaplan rengi yeşil. </h3> <div id="container"> <h3>lorem ipsum do.</h3> <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="yellow" class="box"></div> </div> </body> </html> |
Şimdi de float özelliğini uygulayıp bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .box{ width:80px; height:80px; margin:5px; float:left; } #red{ background-color:red; } #blue{ background-color:blue; } #yellow{ background-color:yellow; } #container{ background-color:limegreen; } </style> </head> <body> <h3> Kapsayıcı div etiketi içerisinde h3 etiketi ve diğer kutular var.Kapsayıcı div'in arkaplan rengi yeşil. </h3> <div id="container"> <h3>lorem ipsum do.</h3> <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="yellow" class="box"></div> </div> </body> </html> |
Gördüğünüz gibi float uygulanan nesneler normal akışın dışına çıkıyor.
Kapsayıcı div’e uyguladığımız arkaplan rengi bunlar için geçerli olmadı.
Bu sorunu 2 farklı yol ile çözebiliriz.
1 Kapsayıcı div’e overflow : auto; özelliğini verip, taşan kısımların görünmesini sağlayarak sorunu çözebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .box{ width:80px; height:80px; margin:5px; float:left; } #red{ background-color:red; } #blue{ background-color:blue; } #yellow{ background-color:yellow; } #container{ overflow:auto; background-color:limegreen; } </style> </head> <body> <h3> Kapsayıcı div etiketi içerisinde h3 etiketi ve diğer kutular var.Kapsayıcı div'in arkaplan rengi yeşil. </h3> <div id="container"> <h3>lorem ipsum do.</h3> <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="yellow" class="box"></div> </div> </body> </html> |
2 Float uygulanan etiketlerden sonra temizleme işlemi yaparak da sorunu çözebiliriz.
Temizleme işlemini ise 2 farklı yöntem ile yapabiliriz.
Birinci yöntem, float uygulanan etiketleri kapsayan etikete şu kodları uygulamak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .box{ float:left; } /* Kapsayıcı div için temizleme kodu*/ #container::after { content: ""; clear: both; display: table; } </style> <div id="container"> <div class="box"></div> <div class="box"></div> </div> |
İkinci yöntem ise kapsayıcı div oluşturmadan float uygulanan etiketlerin sonuna bir div etiketi oluşturup, bu etikete şu kodu uygulamak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> .box{ float:left; } /* Float işleminden sonra yazdığımız div için temizleme kodu*/ .clear { clear: both; } </style> <div class="box"></div> <div class="box"></div> <div class="clear"></div> |
Birinci yöntemi aynı örnek üzerinde uygulayalım ve tarayıcıdaki durumunu inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .box { width: 80px; height: 80px; margin: 5px; float: left; } #red { background-color: red; } #blue { background-color: blue; } #yellow { background-color: yellow; } #container { background-color: limegreen; } #container::after { content: ""; clear: both; display: table; } </style> </head> <body> <h3> Kapsayıcı div etiketi içerisinde h3 etiketi ve diğer kutular var.<br /> Kapsayıcı div'in arkaplan rengi yeşil. </h3> <div id="container"> <h3>lorem ipsum do.</h3> <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="yellow" class="box"></div> </div> </body> </html> |
Önemli Float uyguladığımız etiketler, block etiket değilse bile block etikete dönüştürülürler.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
