Clear ve clearfix

clear ve clearfix tekniklerini öğrenirsin.

Yaslama akışını bitir: clear

Bir öğe float: left ile sola yaslandığında, ardından gelen blok öğeler de onun yanına yerleşebilir. Bazen bunu istemezsin; örneğin alt bilgi her zaman yaslanan görselin altında durmalıdır.

CSS'in clear özelliği yaslama akışını keser. Değerleri left, right, both ve none'dur. clear: both en sık kullanılan değerdir: öğeyi hem sol hem sağ yaslamanın altına iter.

Clearfix: kapsayıcıyı toparla

Bir kapsayıcı öğenin içinde yalnızca yaslanmış çocuklar varsa, kapsayıcının yüksekliği sıfıra çöker; çocuklar dışına taşar. Bu eski bir baş belasıdır. Çözüm clearfix tekniğidir.

Yaygın yöntem: kapsayıcıya .clearfix sınıfı ver ve ::after sahte öğesine content: "", display: table ve clear: both bildirimlerini ekle. Sahte öğe, kapsayıcının sonuna görünmez bir blok koyar ve yüksekliği toparlar.

Uygulama Clearfix sahte öğesi yaz

Bir .clearfix::after seçicisi yaz. İçine content: "", display: table ve clear: both bildirimlerini ekle. Böylece sahte öğe kapsayıcının sonuna görünmez bir blok koyar ve yüksekliği toparlar.

Örnek çözümü göster

/* temizleyici sahte öğe */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Kendini test et

clear: both ne yapar?
```
footer {
  clear: both;
}
```
- Alt bilgiyi hem sol hem sağ yaslamanın altına iter
- Alt bilgiyi sola yaslar
- Alt bilgiyi gizler
- Alt bilgiyi sağa yaslar
Cevabı göster

Alt bilgiyi hem sol hem sağ yaslamanın altına iter — Doğru. clear: both öğeyi hem sol hem sağ yaslamanın altına taşır.

Alt bilgiyi yaslamadan kurtar

footer {
  ____;
}

Cevabı göster

footer {
  clear: both;
}

clear değerini anlamına eşle

both

İki yanı da keser
left

Sol yaslamayı keser
right

Sağ yaslamayı keser
none

Hiçbirini kesmez

Sıradaki ders: Özet - Modal iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler