Gewusst wie: Floats löschen (Clearfix)
Erfahren Sie, wie Sie Floats mit dem „clearfix“-Hack löschen.
So löschen Sie Floats (Clearfix)
Elemente nach einem schwebenden Element fließen um dieses herum. Verwenden Sie den „clearfix“-Hack, um das Problem zu beheben:
Ohne Clearfix
Mit Clearfix
Der Clearfix-Hack
Wenn ein Element größer ist als das Element, das es enthält, und es schwebend ist, wird es außerhalb seines Containers überlaufen.
Dann können wir overflow: auto;
das enthaltende Element hinzufügen, um dieses Problem zu beheben:
Beispiel
.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.