İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

CSS Float Nedir ve Nasıl Çalışır?

CSS Float Nedir ve Nasıl Çalışır?
css-gorsel-3
+ - 0

CSS Float Nedir?

CSS Float özelliği bir elemanı sağa veya sola konumlandırmak için kullanılır. Genellikle görseller ve yazı düzenleri ile kullanılır. Bazı öğelerin hizalanması için amacı dışında kullanımları da mevcuttur.

css float

CSS Float Nasıl Çalışır?

Öğeler yalnızca yatay olarak konumlandırılabilir. Bu nedenle, öğeleri yukarı veya aşağı değil, yalnızca sağa veya sola kaydırmak mümkündür.

float özelliği aşağıdaki değerlerden birine sahip olabilir:

  • left– Öğe, bulunduğu container’ın soluna konumlanır.
  • right– Öğe, bulunduğu container’ın sağına konumlanır.
  • none– Bu varsayılan özelliktir.
  • inherit– Öğe, ebeveyninin float değerini devralır

En basit kullanımında, float özelliği, görüntülerin etrafına metin sarmak için kullanılır.

CSS Float Property

PropertyDescriptionValues
clearClear özelliği ile float uygulanmış element’den sonraki elementlere float etkisini durdurmamız mümkündür. Temizleme işlemi denebilir.left, right, both, none, inherit
float Görüntülerin etrafına metin sarmak için kullanılır.left, right, none, inherit

Örnek Kod

    <!DOCTYPE html>  
    <html>  
    <head>  
    <style>  
    img {  
        float: right;  
    }  
    </style>  
    </head>  
    <body>  
    <p>The following paragraph contains an image with style   
    <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>  
    <img src="good-morning.jpg" alt="Good Morning Friends"/>   
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    This is some text. This is some text. This is some text.  
    </p>  
    </body>  
    </html>  

Yazar Hakkında

Bu Yazıyı Yorumla