Kayan Öğeler

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.

// 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.

.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:

.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:

.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:

.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.

/* 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.