Css Float ve Clear Kullanımı

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.

Float özelliğini uygulamadan tarayıcıdaki durumuna bakalım.

css-dersleri-float-kullanimi-1

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.

css-dersleri-float-kullanimi-2

float : left; özelliği uygulandığında div etiketleri sola doğru yanyana hizalanacaktır.

css-dersleri-float-kullanimi-3

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.

css-dersleri-float-kullanimi-4

Şimdi de float özelliğini uygulayıp bakalım.

css-dersleri-float-kullanimi-5

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.

css-dersleri-float-kullanimi-6

 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.

İkinci yöntem ise kapsayıcı div oluşturmadan float uygulanan etiketlerin sonuna bir div etiketi oluşturup, bu etikete şu kodu uygulamak.

Birinci yöntemi aynı örnek üzerinde uygulayalım ve tarayıcıdaki durumunu inceleyelim.

css-dersleri-float-kullanimi-7

 Ö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.

Yorum Yazın