Nasıl Yapılır - Floatları Temizle (Clearfix)
"Clearfix" hack ile yüzen noktaları nasıl temizleyeceğinizi öğrenin.
Float Nasıl Temizlenir (Clearfix)
Kayan bir öğeden sonraki öğeler, onun etrafından akacaktır. Sorunu çözmek için "clearfix" hack'ini kullanın:
Clearfix olmadan
Clearfix ile
düzeltme Hack
Bir eleman, içinde bulunduğu elemandan daha uzunsa ve yüzüyorsa, kabının dışına taşacaktır.
overflow: auto;
Ardından , bu sorunu çözmek için içeren öğeye ekleyebiliriz :
Ö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;
}
Tip: Learn more about floats in our CSS Float Tutorial.