Ich habe an vielen Orten eine <div class="clear"></div> angetroffen, aber mir ist nicht bewusst, warum ist es getan? Kann mir jemand dazu sagen, warum es in CSS verwendet wird? Dies ist das CSS:Warum wird <div class="clear"></div> nach mehreren Floating DIVS in einem Container DIV verwendet?
div.clear {
clear:both;
}
Die Höhe eines Elements durch seine untergeordneten Elemente bestimmt wird (es sei denn, es explizit festgelegt ist). Zum Beispiel:
Die Höhe von A wird bestimmt durch, wo der untere Rand seines Kindes C ist.
Nun schwebenden Elemente nicht auf der Höhe ihrer Eltern zählen, sind sie aus dem regelmäßigen Fluss genommen:
+------A------+
+--+---------++
| B |
+---------+
+---------+
| C |
+---------+
Das A-Element auf eine minimale Höhe reduziert ist, weil seine zwei Kinder schwebte.
Räumelemente eingeführt, um die richtige Höhe wiederherzustellen:
+------A------+
| +---------+|
| | B ||
| +---------+|
| +---------+|
| | C ||
| +---------+|
|+-----D-----+|
+-------------+
Das Element D ist ein Nullhöhe Element mit dem clear Attribut gesetzt. Das verursacht, dass es unter die floated Elemente fällt (es löscht sie). Das bewirkt, dass A ein normales untergeordnetes Element hat, um seine Höhe zu berechnen. Das ist der typischste Anwendungsfall zumindest.
Die häufig bessere Lösung für die Einführung von zusätzlichen HTML-Elementen ist die Einstellung von A auf overflow: hidden. Dies hat den Effekt, dass eine Höhenberechnung erzwungen wird, die denselben Effekt hat, die Höhe auf die gewünschte Größe zu erhöhen. Diese Lösung kann jedoch andere Nebenwirkungen haben oder auch nicht.
+1 für die bildhafte Beschreibung, wie Schwimmer arbeiten :) – Hristo
+1 Perfektionist .. Ich mag es ... –
Können Sie bitte weiter erklären, wie "Set [Ting] A zu" Überlauf: versteckt "hilft? Wird die Höhe * von A nicht bereits berechnet, um die Höhen von B und C auszuschließen, weil sie schweben? Wie kann man sie verstecken, weil sie die Begrenzungsbox von A überfluten, so dass die Box wachsen muss, um sie einzubeziehen? Ich mag es auch nicht, unsichtbaren * Inhalt * hinzuzufügen, um * Layout * zu kontrollieren und diese bessere (IMHO) Lösung zu verstehen. –
Es ist Floating-Stile zu löschen.
[w3fools] (http://w3fools.com) –
Dachte nicht, dass diese waren zu schlecht von Erklärungen. Geändert Links zu w3c.org :) – Brian
Um es zusammenzufassen, ist es so, als ob man dem Browser sagt, nichts (d. H. Ein Element, div, span, Anker, Tabelle usw.) entweder links oder rechts vom vorherigen Element zuzulassen. Dadurch wird das nächste Element in die nächste Zeile verschoben.
Die häufigsten Probleme beim Schreiben des Codes mit Float-basierten Layouts sind, dass der übergeordnete div-Container nicht auf die Höhe der untergeordneten child-Elemente erweitert wird. Die typische Lösung, um dies zu beheben, besteht darin, ein Element mit clear float nach den Floating-Elementen hinzuzufügen oder dem übergeordneten div einen clearfix hinzuzufügen.
Ich gebe Ihnen einige zwei gute Beispiele für ein besseres Verständnis über Schwimmer Clearing: -
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
Gut explaination von deceze. Aber <div class="clear"></div> ist die alte Methode und unprofessionell Versuchen Sie es mit
#anyelement:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; }
gerade hinzufügen, andere Elemente halten, die wie #firstlement:after, .secondelement:after gelöscht muss und so weiter.
Mehr darüber gehen zu diesem http://www.w3.org/TR/CSS2/visuren.html#float-position –