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