CSS Düzeni - temizle ve temizle
net Mülkiyet
Özelliği kullandığımızda floatve bir sonraki öğeyi istediğimizde (sağda veya solda değil), clear
özelliği kullanmamız gerekecek.
Özellik clear, kayan bir öğenin yanındaki öğeyle ne olması gerektiğini belirtir.
Özellik clearaşağıdaki değerlerden birine sahip olabilir:
-
none- Öğe, sol veya sağ kayan öğelerin altına itilmez. Bu varsayılan -
left- Öğe, soldaki kayan öğelerin altına itilir -
right- Öğe, sağa kayan öğelerin altına itilir -
both- Öğe, hem sol hem de sağ kayan öğelerin altına itilir -
inherit- Öğe, net değeri ebeveyninden miras alır
Floatları temizlerken, clear ile float'ı eşleştirmelisiniz: Bir eleman sola kayarsa, sola doğru temizlemelisiniz. Yüzen öğeniz yüzmeye devam edecek, ancak temizlenen öğe web sayfasında onun altında görünecektir.
Örnek
Bu örnek, soldaki kayan noktayı temizler. Burada, <div2> öğesinin sol kayan <div1> öğesinin altına itildiği anlamına gelir:
div1 {
float: left;
}
div2 {
clear: left;
}
düzeltme Hack
Yüzen bir öğe, içerdiği öğeden daha uzunsa, kabının dışına "taşar". Daha sonra bu sorunu çözmek için bir düzeltme düzeltmesi ekleyebiliriz:
Clearfix olmadan
Clearfix ile
Örnek
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.