Super einfache Möglichkeit, schwebende Elemente_CSS/HTML zu schließen

Ein sehr guter kleiner Tipp, den ich zufällig gesehen habe. Es geht um die Verwendung von CSS zum Umgang mit schwebenden Elementen.

Es gibt viele Methoden zum Schließen von schwebenden Elementen Wenn Sie mehr darüber wissen, lesen Sie den Blog von old9. Dort gibt es einen Artikel über das Schließen schwebender Elemente.

Mein Favorit unter diesen Methoden ist die Verwendung der :after-Pseudoklasse zum dynamischen Einbetten eines Elements zum Löschen schwebender Elemente. Leider ist die Codemenge zu groß und sieht nicht prägnant genug aus. Jetzt sehe ich, dass es eine supereinfache Methode gibt. Lassen Sie mich es kurz vorstellen. Der Originaltext ist unter: http://annevankesteren.nl/2005/03/clearing-floats

Der Grund, warum periphere Elemente nicht gut erweitert werden können, ist der Überlauf . an, da der Überlauf nicht sichtbar ist. Siehe die Erklärung des W3C

Zitatinhalt:

Wenn das Element darüber hinaus schwebende Nachkommen hat, deren untere Randkante unterhalb des unteren Rands liegt, wird die Höhe erhöht, um diese Kanten einzuschließen. Es werden nur Gleitkommazahlen verwendet, die Kinder des Elements selbst oder von Nachkommen im normalen Fluss sind Berücksichtigt werden beispielsweise Floats innerhalb absolut positionierter Nachkommen oder andere Floats nicht.

Fügen Sie nun einfach ein overflow:auto; zum peripheren Element hinzu. Das Ergebnis ist, dass dies mit Ausnahme des IE tatsächlich möglich ist gelöst werden. Als nächstes wird das Problem des IE gelöst. Fügen Sie _height:1% hinzu und das Problem wird vollständig gelöst.

Das Folgende sind drei Beispiele, die ich zum Vergleich gemacht habe

1.Kein geschlossenes schwebendes Element
2.Geschlossenes schwebendes Element unter Nicht-IE
3.Komplett geschlossenes Element

<p> </p> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Super einfaches L枚schen von Schwimmern</title> <style type="text/css"> <!-- body{ Schriftart:.9em/150 % Verdana, Arial, Helvetica, serifenlos, Farbe:#333333;} h1{Hintergrund:#f5f5f5;padding:6px;} em{ color:#f60; font-style:normal;} code{ display:block;font-family:"Courier New", monospace; border:1px #ccc dotted; <style type="text/css"> <!-- body{ font:.9em/150% Verdana, Arial, Helvetica, sans-serif normal; color:#333333;} h1{ background:#f5f5f5; padding:6px;} em{ color:#f60; font-style:normal;} code{ display:block; font-family:"Courier New", Courier, monospace; border:1px #ccc dotted; padding:10px;} <P>#wrap_three{ border:6px #ccc solid; overflow:auto;_height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;} <P>--> </style>#wrap_two{ border:6px #ccc solid; overflow:auto;_height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;} --> <p></p> <div id="wrap_three"> <div class="column_left"> <h1> </h1> <p>Nach links schweben</p> <code>.column_left{ float:left; width:20%; padding:10px;}</code>Diese Ebene schwebt nach links</div> <div class="column_right"> <h1> </h1> <p>Nach rechts schweben<em> </em>Diese Ebene schwebt nach rechts. Unten ist das vollst盲ndige CSS. Dies ist eine periphere Wrap_Three-Layer-Anwendung mit <em>overflow:auto;</em>plus </p>_height:1%;<code> #wrap_three{ border:6px #ccc solid; overflow:auto; _height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}</code> geschlossenem Float-Modell. Peripheriecontainer k枚nnen normal erweitert werden. IE6.0, Firefox 1.5 und Opera 9.0 haben den Test alle bestanden. </div> </div>