CSS Dersleri #23 - Float ve Clear Kullanımı

Bu dersimizde CSS Float ve Clear Kullanımını öğreneceğiz.

CSS'de "float" özelliği, bir etiketin nasıl yaslanması ve konumlanması gerektiğini belirtir.Float özelliği, içeriğin konumlandırılması ve biçimlendirilmesi için kullanılır, örneğin bir resmin bir kapsayıcıdaki metnin soluna kaymasına izin verir.

#WebProgramlama derslerimizin devamı olan Başlangıçtan İleri Seviyeye #CSS Dersleri ile #HTML kodlarınızı daha şık bir hale dönüştürecek ve göz alıcı web siteleri oluşturabileceksiniz.

Kodlama Vakti Kanalına Hoşgeldiniz !

Abone Olmayı Unutmayın🔔

Kodlama Vakti ekibi olarak , programlamanın herkes tarafından öğrenilebilir olduğunu takipçilerimize benimsetmek olup , kanalımızda ki eğitimler özenle hazırlanmaktadır ve tamamen ücretsizdir! Vakit Kodlama Vaktidir !

Eğitimlerimizin size yararlı olduğunu düşünüyor ve beğeniyorsanız videoyu beğenmeyi , kanalımıza abone olmayı unutmayın.

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

left- Etiket, kapsayıcısının soluna yaslanır.
right- Etiket, kapsayıcısının sağınay yaslanır.
none - Etiket bir tarafa yaslanmaz. Varsayılan değeridir.
inherit- Etiket, üst etiketin float değerini devralır

CSS Clear Kullanımı
CSS'de "clear" özelliği, hangi etiketin yaslanan etiketin yanında ve hangi tarafta yaslanabileceğini belirtir.Float özelliğinin etkisinden kurtulmak için clear özelliğini kullanırız. Float uygulanmış etiketten sonra gelen etiketleride etkiler bu etkiden kurtulmak için clear özelliği kullanılır.Clear özelliğini kullanmanın en yaygın yolu, bir etiket üzerinde float özelliğini kullandıktan sonradır.

CSS clearfix Hack
Bir etiket, kendisini içeren etiketten daha uzunsa ve genişletilmişse, alanının dışına "taşar" ve bunu overflow:auto diyerek çözebiliriz.Ama bu taşmaların genişlik ve yükseklik oranları doğru ayarlamazsak bazı ekranlarda yine kaydırma çubuklarını görebiliriz.Bununla birlikte, yeni modern clearfix hack'in kullanımı daha güvenlidir ve çoğu web sayfası için aşağıdaki kod kullanılır:

[KodlamaVakti]

#CSS Float ve Clear Kullanımı dersimizin dokümanına, örnek kodlara ve ilginizi çekebilecek diğer içeriklere aşağıdan ulaşabilirsiniz.

[rurouni-gf]

Hocam css dinlemeye gelmedim sadece like yorum atıp gidecegim çünkü java derslerinizden çok faydalandım çok teşekkürler

[emreergenccc]

O kadar sade ve yalın bir anlatım ki diğer kaynakların yanında çölde karşınıza çıkan vaha etkisi yapıyor. Bir bil. müh. öğrencisi olarak üstortam dersinde anlamadığım konular için buradan yardım alıyorum emekleriniz için teşekkürler

[enesberk]

Yt deki gördüğüm en iyi CSS öğreten kanal <3

[kaan]

hocam ilk kutu örneğinde 1. kutuya float:left; diyince 2.kutu, 1.kutunun konumuna çıkmıştı sağına gelmesi için ona da float left vermistiniz, ama dakika 17:51 de sidebar classına float left verince, content üstüne çıkmıyor ve sağına gidiyor tam anlayamadım bunu izah edebilir misiniz.

[mustafayilmaz]

ben birşey sormak istiyorum float ile iki elemanı yan yana aldığımda ve bir genişlik belirttiğimde sayfa o genişliğin altına gewldiğinide benim float ile yan yana eklediğim elemanlardan biri o sayfaya sığmadığı için aşağı iniyor ve güzel bir görüğntü oluşmuyor bu konu ile ilgili yardımcı olur musun lütfen