--- title: 'Kayan Öğeler' source: 'https://academia.sh/tr/kurslar/css-temelleri/kayan-ogeler' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:15+00:00' license: 'CC BY-SA 4.0' --- # Kayan Öğeler Kaydırmanın satır kutularını kısaltarak metni bir kutunun çevresinden akıtması; kapsayan kutunun yükseklik sorunu ve temizleme ile akış kökü çözümleri. Normal akış kutuları iki kalıpla diziyordu: bloklar alt alta, satır içi kutular yan yana. İstasyon sayfasının konum bölümünde bir istek var ki iki kalıba da uymuyor — konum görseli metnin solunda dursun, açıklama metni de görselin **çevresinden aksın**. Bu davranış için tanımlanmış mekanizmanın adı **kaydırma (float)**'dır. Kaydırma, bir kutuyu satır içi eksenin bir kenarına iter ve akıştaki satır kutularının onun etrafından geçmesini sağlar. Bu ders kaydırmanın ne yaptığını, ne yapmadığını ve getirdiği yükseklik sorununu ele alır. ## Kaydırma Satır Kutularını Kısaltır Kaydırılmış bir kutu normal akıştan çıkarılır ama akışı **etkilemeye devam eder**. Etkisi tek bir yerdedir: kendisiyle aynı dikey aralıkta kalan satır kutuları kısalır. ```js // kaydirma.mjs — kaydirilmis kutunun satir kutularini nasil kisalttigini hesaplar function satirlar({ kapsayanEn, kaydiranEn, kaydiranYukseklik, satirYuksekligi, satirSayisi }) { const c = []; for (let i = 0; i < satirSayisi; i++) { const ust = i * satirYuksekligi; const kaydiranIcinde = ust < kaydiranYukseklik; const kullanilabilir = kaydiranIcinde ? kapsayanEn - kaydiranEn : kapsayanEn; c.push({ satir: i + 1, ust, kullanilabilir, baslangic: kaydiranIcinde ? kaydiranEn : 0 }); } return c; } for (const s of satirlar({ kapsayanEn: 640, kaydiranEn: 200, kaydiranYukseklik: 120, satirYuksekligi: 24, satirSayisi: 7 })) { console.log(`satir ${s.satir}: ust=${String(s.ust).padStart(3)} x=${String(s.baslangic).padStart(3)}..640 kullanilabilir en=${s.kullanilabilir}`); } console.log("\n--- kapsayanin yuksekligi ---"); function kapsayanYukseklik({ akisIcerikYuksekligi, kaydiranYukseklik, akisKoku }) { return akisKoku ? Math.max(akisIcerikYuksekligi, kaydiranYukseklik) : akisIcerikYuksekligi; } for (const akisKoku of [false, true]) { const h = kapsayanYukseklik({ akisIcerikYuksekligi: 48, kaydiranYukseklik: 120, akisKoku }); console.log(`akis koku=${String(akisKoku).padEnd(5)} -> kapsayan yukseklik=${h}`); } ``` ``` satir 1: ust= 0 x=200..640 kullanilabilir en=440 satir 2: ust= 24 x=200..640 kullanilabilir en=440 satir 3: ust= 48 x=200..640 kullanilabilir en=440 satir 4: ust= 72 x=200..640 kullanilabilir en=440 satir 5: ust= 96 x=200..640 kullanilabilir en=440 satir 6: ust=120 x= 0..640 kullanilabilir en=640 satir 7: ust=144 x= 0..640 kullanilabilir en=640 --- kapsayanin yuksekligi --- akis koku=false -> kapsayan yukseklik=48 akis koku=true -> kapsayan yukseklik=120 ``` İlk beş satır kutusu 640 yerine 440 birim genişlikte ve 200 biriminden başlıyor: kaydırılmış görsel o aralıkta duruyor. Altıncı satır, görselin alt kenarını geçtiği için tam genişliğe dönüyor. Metnin görselin çevresinden akması budur — gizemli bir sarma davranışı değil, satır kutularının kısaltılmasıdır. Buradan iki sonuç çıkar. **Kaydırma yalnızca satır kutularını etkiler, blok kutuları değil.** Kaydırılmış bir kutunun yanındaki blok kutu daralmaz; kapsayanı doldurmaya devam eder ve kaydırılmış kutunun altından geçer. Yalnızca o blok kutunun içindeki metin satırları kısalır. Bu, kaydırmayı sütun düzeni kurmak için kullanmanın neden kırılgan olduğunu gösterir. **Kaydırma yönlüdür.** `float: inline-start` kutuyu satır içi eksenin başına, `float: inline-end` sonuna iter. Fiziksel karşılıkları `left` ve `right`'tır; mantıksal değerler yazma yönüne uyum sağlar. ## Kapsayanın Yüksekliği Çöker Çıktının ikinci bloğu, kaydırmanın asıl sorununu veriyor. Kaydırılmış kutu akıştan çıkarıldığı için kapsayanının yüksekliğine **katılmaz**. Kapsayan kutuda 48 birimlik akış içeriği ve 120 birimlik kaydırılmış bir görsel varsa, kapsayanın yüksekliği 48 olur; görsel kutunun dışına taşar. Bunun görünür sonucu, kapsayana verilen arka planın ya da kenarlığın görseli kapsamamasıdır. Sorun bir hata değil, tanımın doğrudan sonucudur: akıştan çıkmış bir kutu, akışın yüksekliğine katkı vermez. İki çözüm vardır. ## Çözüm 1: Temizleme `clear` özelliği bir kutuya, kendisinden önceki kaydırılmış kutuların **altına** inmesini söyler. ```css .temiz { clear: both; } ``` `clear: inline-start` yalnızca başa kaydırılmışların, `inline-end` yalnızca sona kaydırılmışların, `both` ikisinin de altına iner. Temizleme, kapsayanın yüksekliğini dolaylı olarak düzeltmekte kullanılır: kapsayanın son çocuğu olarak temizleyen bir kutu konursa, o kutu kaydırılanın altına iner ve kapsayan onu içermek için uzar. Bu, bir sözde elemanla belge kirletmeden yapılabilir: ```css .temizleyen::after { content: ""; display: block; clear: both; } ``` Çözüm işler ama dolaylıdır: yükseklik sorununu çözmek için bir içerik ögesi üretilir. ## Çözüm 2: Bağımsız Akış Kökü Doğrudan çözüm, kapsayanı bir **bağımsız akış kökü (block formatting context)** yapmaktır. Böyle bir kutu, içindeki kaydırılmış kutuları kendi yüksekliğine katar; çıktının son satırında `akis koku=true` durumunda yüksekliğin 120 olması bunu gösteriyor. Bir kutuyu akış kökü yapmanın açık yolu: ```css .konum-bolumu { display: flow-root; } ``` Aynı sonucu veren dolaylı yollar da vardır: `overflow` değerinin `visible` dışında bir şey olması, kutunun esnek kutu ya da ızgara düzeni içinde bulunması, mutlak konumlandırılmış olması. Bunlar yan etkileriyle birlikte gelir — `overflow: hidden` yazmak taşan içeriği de kırpar. `flow-root` ise yalnızca istenen işi yapar. Akış kökünün üç etkisi vardır ve üçü de önceki derslerde karşımıza çıkmıştı: - İçindeki kaydırılmış kutular yüksekliğe katılır. - Dışarıdaki kaydırılmış kutular içine taşmaz. - Dış boşluk çökmesi kutunun sınırında durur. Üçü de aynı tanımdan gelir: kutu, blok yerleşimini kendi içinde tamamlar. ## Kaydırılmış Kutunun Kendi Ölçüsü Kaydırılmış bir kutu blok kutu üretir ama kapsayanını doldurmaz. Genişliği bildirilmediğinde **içeriğine göre daralır**: kutu, içine sığdırabileceği en dar ölçüye çekilir. Bu, akıştaki bir blok kutunun davranışının tersidir. Sonuç, kaydırılmış bir kutuya genişlik bildirmenin çoğu zaman zorunlu olmasıdır. Metin taşıyan bir kutu daraltıldığında satır sayısı artar ve kutu beklenmedik biçimde uzar; görsel taşıyan bir kutu ise görselin doğal ölçüsüne oturur. İkinci bir davranış, kaydırılmış kutuların **birbirini itmesidir**. Aynı kenara birden çok kutu kaydırıldığında yan yana dizilirler; satıra sığmayan bir alt sıraya iner. İnme noktası, önceki kaydırılmış kutuların alt kenarlarıyla belirlenir ve kutular farklı yüksekliklerdeyse dizilim düzensizleşir. Kaydırmayla ızgara benzeri bir düzen kurmanın kırılganlığının bir başka kaynağı budur. ## Kaydırma Sınırının Biçimi Satır kutularını kısaltan sınır, öntanımlı olarak kaydırılmış kutunun dış boşluk dikdörtgenidir — biçimi ne olursa olsun bir dikdörtgen. Bu sınır `shape-outside` özelliğiyle değiştirilebilir: ```css .konum-gorseli { float: inline-start; shape-outside: circle(50%); shape-margin: 12px; } ``` `shape-outside` yalnızca akan metnin sınırını değiştirir; kutunun kendisini kırpmaz. Görselin dairesel görünmesi isteniyorsa `clip-path` ayrıca yazılır. İki özellik farklı işler görür: biri komşuların nereden geçeceğini, diğeri kutunun neresinin çizileceğini belirler. ## Kaydırma Ne İçin Kullanılır Kaydırma, sütunlu sayfa düzenleri kurmak için uzun süre kullanılmış bir araçtır. Bu kullanım kaydırmanın tanımına uymaz ve çıktının ilk bloğu sebebini gösterir: kaydırma bir kutuyu bir sütuna yerleştirmez, yalnızca satır kutularını kısaltır. Sütun yüksekliklerinin eşitlenmesi, kutuların hizalanması ve aralıklandırılması ayrıca çözülmesi gereken sorunlar olarak kalır. Kaydırmanın kendi tanımına uyan tek kullanımı **metnin bir kutunun çevresinden akmasıdır**. Bir sonraki kursta ele alınacak düzen sistemleri sütun kurma işini üstlenir ve bu işi kaydırmadan daha az bildirimle, daha öngörülebilir biçimde yapar. Kaydırma o kurslarda da yerinde kalır, çünkü hiçbir düzen modeli metni bir kutunun çevresinden akıtmaz. ```css /* istasyon.css — 12. adım: konum görseli ve çevresinden akan metin */ .konum-bolumu { display: flow-root; } .konum-gorseli { float: inline-start; inline-size: 200px; margin-inline-end: 16px; margin-block-end: 8px; } .konum-bolumu .kaynak-notu { clear: both; } ``` `display: flow-root` bildirimi, bölümün görseli içermesini sağlar. Görsele verilen sona doğru dış boşluk, metnin görsele yapışmasını önler — kaydırılmış kutunun dış boşluk kenarı satır kutularını kısaltan sınırdır, kenarlık kenarı değil. Son kural kaynak notunu görselin altına indirir; not metnin sağ yanında değil, bölümün sonunda okunmalıdır. ## Özet - Kaydırılmış kutu normal akıştan çıkar ama kendisiyle aynı dikey aralıktaki satır kutularını kısaltır; metnin çevresinden akması budur. - Kaydırma satır kutularını etkiler, blok kutuları etkilemez; bu yüzden sütun düzeni kurma aracı olarak kırılgandır. - Kaydırılmış kutu kapsayanının yüksekliğine katılmaz; kapsayan çöker ve arka planı, kenarlığı kaydırılmış içeriği kapsamaz. - `clear` bir kutuyu kaydırılmışların altına indirir; kapsayanın son çocuğu olarak kullanıldığında yüksekliği dolaylı olarak düzeltir. - `display: flow-root` kutuyu bağımsız akış kökü yapar: kaydırılmışları yüksekliğe katar, dışarıdaki kaydırılmışları içeri almaz ve dış boşluk çökmesini sınırında durdurur. ## Sonraki Adım Kaydırma bir kutuyu akıştan çıkardı ama nereye gideceğini seçtirmedi; kutu yalnızca bir kenara itildi. Bir ögeyi belgede istenen bir noktaya yerleştirmek — bir rozeti bir kartın köşesine, bir başlığı kaydırmada sabit tutmak — başka bir mekanizma ister. Sonraki ders konumlandırmanın beş değerini ve her birinin hangi kutuya göre ölçüldüğünü tanımlar.