float ne yapar
float bir elementi kapsayıcısının bir tarafına iter ve ardından gelen metnin onun etrafına sarılmasına izin verir:
Float edilmiş kutudaki margin metnin ona değmesini önler. Bu boşluğu margin'lerle kontrol edersin; metnin kendisine float'a doğru bir margin verilemez.
Değerler
| Değer | Sonuç |
|---|---|
none (varsayılan) | Float yok |
left | Sol kenara itilir |
right | Sağ kenara itilir |
inline-start | Satırın başına itilir: İngilizcede sol, Arapça ya da İbranicede sağ |
inline-end | Satırın sonuna itilir |
inline-start ve inline-end yazı yönünü takip eder, bu yüzden onlarla kurulan bir düzen sağdan sola sayfalarda doğru şekilde aynalanır. Float edilmiş bir element aynı zamanda blok olur: display: inline block'a çevrilir, bu yüzden width ve height bir span ya da img üzerinde bile uygulanır.
Metin içinde resimleri float etmek
Klasik kullanım: bir makalenin içinde, etrafından metin akan bir resim. Her iki tarafa birer tane float et:
clear: sarılmayı durdurmak
clear, "bu taraftaki önceki float'ların altından başla" der. Onu bir float'ın yanında durmaması gereken elemente, örneğin bir sonraki bölümün başlığına ver:
İlk başlık float'ın yanına sıkışıyor. İkincisi onun altından başlıyor. clear, left, right, both, inline-start, inline-end ve none kabul eder.
Çöken ebeveyn ve flow-root
Float'lar normal akışın dışındadır, bu yüzden bütün çocukları float edilmiş bir kapsayıcının akışta hiçbir şeyi olmaz ve sıfır yüksekliğe çöker. Arka planı ve kenarlığı float'ların üstünde ince bir çizgiye dönüşür:
display: flow-root, float'larını her zaman saran yeni bir block formatting context oluşturur. Eski kod aynı sonuç için bir "clearfix" kullanır:
.clearfix::after {
content: "";
display: block;
clear: both;
}
overflow: hidden ya da auto da float'ları içine alır, ama kırpma yan etkisiyle; bkz. overflow.
Float'lar düzen için değildir
Flexbox ve grid'den önce bütün sayfa düzenleri float edilmiş sütunlardan, her yerde clearfix'ler ve genişlik hesaplarıyla kurulurdu. O dönem bitti: float'lar ortalayamaz, sütunları aynı yükseklikte yapamaz ve içeriğin boyutu değiştiğinde bozulur. Satırlar ve sütunlar için display: flex ya da display: grid kullan, float'ı metni bir şeyin etrafına sarmak için sakla. Bir resmin etrafına metin sarmak yerine onu ortalamak için resim ortalama sayfasına bak.
Bir şeklin etrafına sarmak
shape-outside, metnin float'ın dikdörtgeni yerine bir şekli takip etmesini sağlar. Yalnızca float edilmiş elementlerde çalışır:
.avatar {
float: left;
width: 120px; height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
margin-inline-end: 16px;
}
Sık yapılan hatalar
- Sıfır yükseklikte bir ebeveyn. Çocuklarının hepsi float edilmiştir.
display: flow-rootekle. - Sütunlar ya da gezinme için float'lar. Flexbox ya da grid kullan.
float: centerbeklemek. Böyle bir değer yoktur. Flexbox, grid ya damargin: 0 autoile ortala.- Bir float'tan sonraki içeriğin sarılmaması gerekirken sarılması. Ona
clear: bothver ya da float'ı ve metnini birflow-rootkapsayıcısına koy. - Çok dilli bir sitede fiziksel
leftveright. Düzen sağdan sola dillerde aynalansın diyeinline-startveinline-endkullan.
Sıkça Sorulan Sorular
CSS'te float ne işe yarar?
Bir elementi normal akıştan çıkarır ve kapsayıcısının sol ya da sağ kenarına iter. Ondan sonra gelen metin ve satır içi içerik onun etrafına sarılır.
clear ne işe yarar?
clear, bir elementi verilen taraftaki önceki float'ların altına taşır: clear: left, clear: right ya da clear: both. İçeriğin bir float'ın yanına sarılmasını böyle durdurursun.
Float edilmiş bir elementin ebeveyni neden sıfır yükseklikte?
Float'lar normal akışın dışındadır, bu yüzden yalnızca float edilmiş çocukları olan bir ebeveynin akışta içeriği yoktur ve çöker. Ebeveyne display: flow-root ekle, float'larını içine alacak şekilde büyür.
Clearfix nedir?
Bir ebeveynin float'larını içine almasını sağlayan bir hiledir; geleneksel olarak clear: both içeren bir ::after sözde elementidir. Bugün ebeveyne verilen display: flow-root aynı işi tek satırda yapar.
Düzen için float kullanmalı mıyım?
Hayır. Float'lar flexbox ve grid ortaya çıkmadan önce sütunlar için kullanılıyordu. Düzen için flexbox ya da grid kullan, float'ı asıl işine sakla: metni bir resmin ya da bir alıntının etrafına sarmak.
