- Konu sahibi
- #1
HTML’de “float” denilen özellik aslında CSS’in
Sağdan sola yazım yönünü destekleyen tasarımlarda fiziksel
Aşağıdaki dosyayı
Örnekte dışarıdan dosya gerektirmeyen bir not kutusu sola yaslanır; paragraflar uygun alan varsa yanından akar. “Yeni bölüm” başlığı
Aşağıdaki ayrım, float kullanıp kullanmayacağınıza karar vermeyi kolaylaştırır.
Float kullandığınızda kapsayıcının yüksekliğini kontrol edin. Kapsayıcının yalnızca kayan çocuklardan oluşması halinde yüksekliği beklenenden küçük görünebilir. Böyle bir durumda kapsayıcıya
Float, metnin kayan elementin çevresinden akmasına izin verir.
Bir elementin float kullanmaması için
float özelliğidir. Bir elementi kapsayıcısının soluna veya sağına yaslar; normal metin ve satır içi içerik, kayan elementin boşta kalan yanından akmaya devam eder. Tipik kullanım, bir görselin veya kısa not kutusunun etrafında metin dolaştırılmasıdır. float, modern sayfa kolonlarını oluşturmak için de kullanılabilir; ancak bu iş için çoğu durumda Flexbox veya Grid daha anlaşılırdır.Float nasıl çalışır?
float: left elementi sola, float: right elementi sağa taşır. Kayan element normal akışta kapladığı yeri aynı şekilde korumaz; sonraki içerik, yeterli yatay alan varsa onun çevresine yerleşir. Elementin genişliği belirtilmezse beklenmeyen ölçüler ve sıkışan metinler görülebilir.Sağdan sola yazım yönünü destekleyen tasarımlarda fiziksel
left ve right yerine ihtiyaca göre inline-start veya inline-end tercih edilebilir. Kayan içeriğin altına geçmek isteyen bir sonraki element için clear kullanılır.Çalışan en küçük örnek
Aşağıdaki dosyayı
float.html adıyla kaydedip tarayıcıda açın:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Float örneği</title>
<style>
.metin { max-width: 600px; line-height: 1.6; display: flow-root; }
.not {
float: left; width: 140px; max-width: 40%;
box-sizing: border-box; margin: 0 16px 8px 0;
padding: 8px; border: 1px solid #666; border-radius: 4px;
}
.temizle { clear: both; }
</style>
</head>
<body>
<article class="metin">
<aside class="not" aria-label="Kısa not">Float, yanındaki metnin akışını etkiler.</aside>
<p>Bu paragraf, sola kayan not kutusunun sağındaki boşluğa yerleşir. Metin yeterince uzunsa kutunun altına ulaştığında yeniden satırın tamamına yayılır.</p>
<p>Genişlik değiştikçe kullanılabilir boşluk da değişir. Dar ekranlarda metin kutunun altına geçebilir.</p>
<h2 class="temizle">Yeni bölüm</h2>
<p>Bu bölüm kayan kutunun altında başlar.</p>
</article>
</body>
</html>Örnekte dışarıdan dosya gerektirmeyen bir not kutusu sola yaslanır; paragraflar uygun alan varsa yanından akar. “Yeni bölüm” başlığı
clear: both sayesinde kutunun altında başlar. Başlık yanında kalıyorsa geliştirici araçlarında bu kuralın doğru öğede uygulandığını kontrol edin. Kapsayıcıdaki flow-root ise kayan çocuğu da kapsayan bir biçimlendirme bağlamı oluşturur.Hangi durumda hangi yaklaşım?
Aşağıdaki ayrım, float kullanıp kullanmayacağınıza karar vermeyi kolaylaştırır.
| İhtiyaç | Uygun yaklaşım | Neden |
|---|---|---|
| Metni görselin etrafında dolaştırmak | float | Metin kayan görselin yanından akar |
| Yan yana kartları hizalamak | Flexbox veya Grid | Hizalama ve responsive davranış daha nettir |
| Kayan içeriğin altına geçmek | clear | Elementin float alanının altında başlamasını sağlar |
| Float içeren kapsayıcı yüksekliğini korumak | display: flow-root | Kapsayıcının kayan çocuklarını kapsamasına yardımcı olur |
display: flow-root vermek veya uygun bir temizleme yöntemi kullanmak sorunu giderir.Sık yapılan hatalar
- Float’ı HTML etiketi sanmak:
floatbir HTML etiketi değil, CSS özelliğidir. - Kolon düzenini yalnızca float ile kurmak: Çok kolonlu yeni düzenlerde Flexbox veya Grid daha kolay yönetilir.
- Genişlik ve boşlukları hesaba katmamak: Float genişliği, kenar boşlukları ve kapsayıcı genişliği aynı satıra sığmalıdır.
- Her sonraki elementi
clear: bothyapmak: Bu, gereksiz boşluklar oluşturabilir; yalnızca gerçekten kayan alanın altına geçmesi gereken elementte kullanın. - Görselin anlamını yalnız yerleşime bırakmak: İçerik görseliyse amacına uygun
altyazın; yalnız dekoratifse boşalt=""kullanın. Float erişilebilir metin alternatifinin yerine geçmez.
Sık sorulan sorular
Float ile position: absolute arasındaki fark nedir?
Float, metnin kayan elementin çevresinden akmasına izin verir.
position: absolute ise elementi normal yerleşim akışından çıkararak belirli konumlara yerleştirir; metin genellikle onun çevresine float’taki gibi sarılmaz.Float’ı iptal etmek için ne yazılır?
Bir elementin float kullanmaması için
float: none yazılır. Önceki kayan elementlerin altına geçmesini istiyorsanız ayrıca clear: both kullanmanız gerekir.