Yükleniyor...

CSS Float ve Clear

Z-index örtüşen katmanları istifledi. float ve clear başka bir klasik sorunu çözer: metnin bir görselin veya uyarı kutusunun yanına sarılmasını sağlamak, sonra bir sonraki bloğun bu float’ların altına ne zaman düşmesi gerektiğine karar vermek. Sarma kalıbını öğrenin — sayfa ızgaralarını Flexbox ve Grid’e bırakın.

Bir float ve clear araç seti

📊 Float ve clear bir bakışta

Araç	Günlük iş
`float: left`	Kutuyu sola çeker; sonraki içerik sağda sarılabilir
`float: right`	Kutuyu sağa çeker; sonraki içerik solda sarılabilir
`float: none`	Varsayılan — float davranışı yok
`clear: left`	Sonraki blok sol float’ların yanına oturmayı reddeder
`clear: right`	Sonraki blok sağ float’ların yanına oturmayı reddeder
`clear: both`	Sonraki blok her iki taraftaki float’ların altına düşer
Clearfix	Ebeveyn, yüzen çocukları sarmak için büyür (ör. `overflow` veya `display: flow-root`)

Yüzen kutular normal akışı özel bir şekilde terk eder: komşular yanlarında sarılabilir ve yalnızca float içeren bir ebeveyn yüksekliği sıfıra çökebilir. Bu çökme clearfix’in var olma nedenidir.

Bir görseli float’la, hikâyeyi sar

Bir figürü sola çekin ve paragrafların yanından akmasına izin verin. Görsele genişlik verin ki sarma kasıtlı görünsün, tesadüfi değil.

Görsel float left

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

Uyarıyı diğer tarafa float’la

Kısa bir ipucu veya alıntı sağda oturabilir, gövde metni solda sarılır. Metnin kutuya yapışmaması için kenar boşluklarını koruyun.

Uyarı float right

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

clear — float’a sarılmayı bırak

Bir başlık, altbilgi veya sonraki bölüm float’ların altında taze bir satırdan başlamalıysa clear kullanın. clear: both günlük «yüzen her şeyin altına düş» ifadesidir.

Float’lardan sonra clear both

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

Çöken ebeveynler clearfix ister

Bir ebeveyn yalnızca yüzen çocukları sarıyorsa yüksekliği çökebilir ve arka plan/kenarlıklar bozuk görünür. Sakin düzeltme: ebeveynde overflow: auto (veya hidden) — ya da modern display: flow-root.

Overflow clearfix

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root — net bir containing block

display: flow-root yeni bir block formatting context oluşturur; ebeveyn float’larını overflow yan etkilerini ödünç almadan içerir.

flow-root clearfix

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

Sakin bir float alışkanlığı

Metin-çevresinde-medya ve küçük sarma numaraları için float kullanın. Nav, sayfa sütunları ve kart ızgaraları için Flexbox veya Grid tercih edin. Unutmayın: position yerleştirir; z-index katmanlar; float sarar.

Medya artı metin kalıbı

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

Kendiniz deneyin

Paragraf yoğun bir makalede görseli sola float’layın ve kenar boşluklarını ayarlayın.
Bir ipucu kutusunu sağa float’layın ve gövde metnini yanında sarın.
Float’ların yanında yükselen bir altbilgiye clear: both ekleyin.
Çöken bir ebeveyni overflow: auto veya display: flow-root ile düzeltin.
Bir cümle yazın: float yerine Flex’i ne zaman seçersiniz?

Yaygın hatalar

Tüm sayfa düzenlerini Flex/Grid yerine float ile kurmak
clear unutup altbilgilerin görsellerin yanında tırmanması
Yüzen çocukların etrafındaki çöken ebeveynleri yok saymak
float’ı position veya z-index gibi ele almak
Sonraki bloğu kastederken clear’i yalnızca yüzen kutuya koymak

Özet

float bir kutuyu kenara çeker; sonraki içerik sarılabilir
clear sonraki blokları float’ların altına düşmeye zorlar
Yalnızca-float ebeveynler çökebilir — overflow veya flow-root ile clearfix
Sarma kalıpları için float; sayfa yapısı için Flex/Grid
Yerleştirme ve istifleme kendi araçlarında kalır (position, z-index)

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil