CSS -Layout - klar und klar
Das klare Eigentum
Wenn wir die floatEigenschaft verwenden und das nächste Element darunter haben möchten (nicht rechts oder links), müssen wir die clear
Eigenschaft verwenden.
Die clearEigenschaft gibt an, was mit dem Element passieren soll, das sich neben einem schwebenden Element befindet.
Die clearEigenschaft kann einen der folgenden Werte haben:
-
none- Das Element wird nicht unter linke oder rechte schwebende Elemente geschoben. Dies ist Standard -
left- Das Element wird unter die linken schwebenden Elemente geschoben -
right- Das Element wird unter die rechts schwebenden Elemente geschoben -
both- Das Element wird sowohl unter das linke als auch das rechte schwebende Element geschoben -
inherit- Das Element erbt den klaren Wert von seinem übergeordneten Element
Wenn Sie Floats löschen, sollten Sie das Clear mit dem Float abgleichen: Wenn ein Element nach links gefloatet ist, sollten Sie nach links löschen. Ihr schwebendes Element wird weiterhin schweben, aber das gelöschte Element wird darunter auf der Webseite angezeigt.
Beispiel
Dieses Beispiel löscht den Float nach links. Hier bedeutet dies, dass das <div2>-Element unter das linke schwebende <div1>-Element geschoben wird:
div1 {
float: left;
}
div2 {
clear: left;
}
Der Clearfix-Hack
Wenn ein schwebendes Element größer als das enthaltende Element ist, wird es außerhalb seines Containers "überlaufen". Wir können dann einen Clearfix-Hack hinzufügen, um dieses Problem zu lösen:
Ohne Clearfix
Mit Clearfix
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;
}
You will learn more about the ::after pseudo-element in a later chapter.