Auf meiner Webseite habe ich ein Logo und ein Menü, die Kopfzeilenelemente und eine Heldeneinheit darunter bilden. Jetzt möchte ich etwas unteren Rand geben, damit es genügend negativen Abstand gibt Header und Hero-Einheit, aber dieser untere Rand (100px) gilt nicht. Dasselbe gilt, wenn ich versuche, den oberen Rand von der Heldeneinheit zu geben.
%Vor%Hier ist mein Arbeitsprobe JS BIN
Hinzufügen eines div darunter mit:
%Vor%würde helfen. Aber noch einfacher ist:
%Vor%Wenn Sie den Überlauf hinzufügen: versteckt; Der Browser wird gezwungen, die Größe der darin enthaltenen Elemente zu berechnen, obwohl sie floaten. Wenn die Größe berechnet wird, weiß sie auch, wo der Rand unten beginnen soll.
Eine weitere beliebte Verwendung von Setting Overflow ist merkwürdigerweise Float Clearing. Durch das Setzen des Überlaufs wird der Float am Element nicht gelöscht, sondern es wird gelöscht. Das bedeutet, dass das Element mit dem Überlauf (automatisch oder ausgeblendet) so groß wird, dass es untergeordnete Elemente innerhalb von Floating-Objekten (statt zu kollabieren) umfasst, vorausgesetzt, dass die Höhe nicht deklariert ist.
Der Unterschied zwischen automatisch und versteckt in diesem Fall ist, dass mit versteckt, wird es verstecken alles, was überläuft, wenn es nicht genug Platz mehr hat, und mit Auto, wird es eine Bildlaufleiste erstellen.
Da diese Frage anscheinend immer noch aktiv ist, füge ich die gängigste Art hinzu, dies in der heutigen Zeit zu lösen:
%Vor% Dies ist das Gleiche wie bei der ersten Methode, aber ohne ein weiteres Element hinzufügen zu müssen. Dies ist der Weg zu gehen, wenn overflow keine Option ist (oder auch wenn es eine Option ist, wäre das besser).
Als ich diese Antwort zum ersten Mal gepostet habe, war das keine Option, da sie von IE 6/7 nicht unterstützt wurde, die damals noch weit verbreitet waren.
Sie könnten Ihrem Header oder Wrapper-Tag einen Clearfix hinzufügen. Dies ist ein nützliches Bit von css, das in Ihre Datei eingefügt werden soll. Mehr über den Clearfix finden Sie hier