Css Float ve Clear Kullanımı

Merhaba Arkadaşlar,
Bu makalede 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 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.

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

Dikkat : Float uyguladığımız etiketler, block etiket değilse bile block etikete dönüştürülürler.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 17 – Z-index Kullanımı

Sonraki : Css Dersleri 19 – Box Sizing Nedir?

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +