Float
float ile metin akışını öğrenirsin.
Öğeyi bir kenara yasla: float
Eskiden düzen kurmak için kullanılan float özelliği bir öğeyi sol ya da sağ kenara yaslar ve ardından gelen içeriğin bu öğenin yanından akmasını sağlar. Değerler left, right, none ve inherit'tir.
En bilinen kullanım yeri bir görseli paragrafın sağına ya da soluna yaslamaktır. Görsel yaslanır, metin ise onun yanından kayarak sarar. Bu davranışa metin sarma (text wrap) denir.
Metin sarma nasıl çalışır?
Bir görsel float: left ile sola yaslandığında, hemen sonrasındaki metin görselin sağ üst köşesinden başlar ve görsel bitene kadar alt satırlara doğru akar; sonra görselin altından tam genişlikte devam eder.
Bu, dergi sayfalarındaki görsel-metin yerleşimine benzer. margin-right ile görsel ile metin arasına boşluk koymak okunurluğu artırır. Aynı biçimde float: right sağa yaslar, metin solundan akar.
Uygulama Görseli yasla ve boşluk bırak
Bir img tür seçicisi yaz. İçine float: left bildirimi ve görselle metin arasına boşluk bırakmak için margin-right bildirimi ekle. Böylece görsel sola yaslanır, metin sağından akar.
Örnek çözümü göster
/* görseli sola yasla */
img {
float: left;
margin-right: 1rem;
}Kendini test et
-
float: left ne yapar?
img { float: left; margin-right: 1rem; }- Görseli gizler
- Görseli sağ kenara yaslar
- Görseli sabit konumlandırır
- Görseli sol kenara yaslar ve metni yanına sarar
Cevabı göster
Görseli sol kenara yaslar ve metni yanına sarar — Doğru. float: left görseli sola yaslar ve ardından gelen metni sağından akıtır.
-
Görseli sola yasla
img { ____; }Cevabı göster
img { float: left; } -
float değerini anlamına eşle
- left
- Sola yaslar
- right
- Sağa yaslar
- none
- Yaslamayı iptal eder
- inherit
- Üst ögeden alır