CSS Düzen - clear ve clearfix

clear Özelliği

clear Özellik, hangi elementlerin temizlenmiş elementin yanında kaydırılabileceğini ve hangi tarafa sahip olacağını belirtir.

clear Özellik, aşağıdaki değerlerden birini ayarlayabilir:

  • none - Her iki tarafa da kaydırılan elementlerin olmasına izin verilir. Varsayılan değer
  • left - Sol tarafa kaydırılan elementlerin olmasına izin verilmez
  • right - Sağ tarafa kaydırılan elementlerin olmasına izin verilmez
  • both - Hem sol hem de sağ tarafa kaydırılan elementlerin olmasına izin verilmez
  • inherit - Element, ebeveyninin clear değerini devralır

Kullanım clear Özelliğin en yaygın kullanımı, element üzerinde kullanılmıştır float Özellikten sonra.

Yapılandırma sırasında, temizleme ile kaydırma arasında uyum sağlanmalıdır: Eğer bir element sol tarafa kaydırılıyorsa, solunu temizlemelisiniz. Kaydırılan elementler devam edecek, ancak temizlenen elementler altında görünecektir.

Aşağıdaki örnek, sola kaydırılanları temizler. Bu, (div'in) solunda kaydırılan elementlerin olmamasını ifade eder:

Örnek

div {
  clear: sol;
}

Kişisel Deneyimleyin

clearfix Hakkında

Eğer bir element, onu içeren elementten yüksekse ve kaydırılıyorsa, konteynırının dışına 'akacak':

Sonra bu sorunu çözmek için içeren elemente overflow: auto; ekleyebiliriz:

Örnek

.clearfix {
  overflow: auto;
}

Kişisel Deneyimleyin

Dış kenar boşluklarını ve iç kenar boşluklarını kontrol edebiliyorsanız (aksi takdirde kayan çubuk görebilirsiniz), overflow: auto clearfix iyi çalışır. Ancak, yeni modern clearfix hile teknikleri daha güvenli kullanılır, aşağıdaki kod çoğu web sitesinde uygulanmıştır:

Örnek

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Kişisel Deneyimleyin

Sonraki bölümlerde öğreneceksiniz ::after Sözde Elementler.