Zusammenfassung gängiger Methoden zum Löschen von Floats in CSS_Experience Exchange

Es gibt drei häufig verwendete Methoden zum Löschen von Floats.
Dies ist der schwebende Quellcode, der nicht gelöscht wurde. Der hellgelbe Hintergrund des übergeordneten Elements ist beim Ausführen des Codes nicht sichtbar.                                                                              

Links <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Richtig<div id="layout"> <div id="left"> </div> <div id="right"></div> </div> [Strg+A Alle auswählen Hinweis:
Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ] 1. Float mit leerem Etikett löschen. Eine Methode, die ich seit langem verwende, besteht darin, dass das leere Tag ein div-Tag oder ein P-Tag sein kann. Ich bin es gewohnt,

zu verwenden, was kurz genug ist, und viele Leute verwenden auch

---

. Sie müssen nur den Rand dafür freimachen, aber theoretisch kann es jede beliebige Bezeichnung sein. Diese Methode besteht darin, ein solches Tag zum Löschen von Float hinzuzufügen, nachdem alle Float-Elemente innerhalb des Float-Elternelements gelöscht werden müssen, und den CSS-Code dafür zu definieren: clear:both. Der Nachteil dieses Ansatzes besteht darin, dass er bedeutungslose Strukturelemente hinzufügt.

Links <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} .clr{clear:both;} --> </style>Richtig<div id="layout"> <div id="left"></div> <div id="right"> </div> <p class="clr"></p> </div> [Strg+A Alle auswählen Hinweis:
Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ] 2. Verwenden Sie das Überlaufattribut. Diese Methode behebt effektiv den Nachteil, unbeabsichtigten Code hinzufügen zu müssen, indem Floats durch leere Label-Elemente gelöscht werden. Um diese Methode zu verwenden, müssen Sie nur die CSS-Eigenschaft overflow:auto in dem Element definieren, dessen Floating gelöscht werden soll, und fertig! „zoom:1“ dient der Kompatibilität mit IE6.

Links <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Richtig<div id="layout"> <div id="left"> </div> <div id="right"></div> </div> [Strg+A Alle auswählen Hinweis:
Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ] 3. Verwenden Sie das After-Pseudoobjekt, um klar zu schweben. Diese Methode gilt nur für Nicht-IE-Browser. Spezifische Schreibmethoden finden Sie in den folgenden Beispielen. Bitte beachten Sie bei der Verwendung die folgenden Punkte. 1. Bei dieser Methode muss height:0 für das Pseudoobjekt festgelegt werden, das das schwebende Element löschen muss, andernfalls ist das Element mehrere Pixel höher als der tatsächliche Wert. 2. Das Inhaltsattribut ist erforderlich, sein Wert kann jedoch sein leere, blaue ideale Diskussion Bei dieser Methode wird der Wert des Inhaltsattributs auf „.“ gesetzt, aber ich habe festgestellt, dass es auch möglich ist, es leer zu lassen.

Links <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Richtig<div id="layout"> <div id="left"> <br><input onclick="runEx('runcode74943')" type="button" value="运行代码"> <input onclick="doCopy('runcode74943')" type="button" value="复制代码"> <input onclick="doSave(runcode74943)" type="button" value="保存代码">[Strg+A Alle auswählen Hinweis: <a href="/article/23421.htm" title="查看具体详情" target="_blank">Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen </a>]</div> <br> <br> Diese drei Methoden haben bestimmte Nachteile, und Sie sollten bei der Verwendung die beste auswählen. Im Vergleich dazu ist die zweite Methode vorzuziehen. Die oben genannten Methoden sind nicht original und stammen alle aus dem Internet. Sie werden hier zusammengestellt. Der ursprüngliche Autor behält sich alle Rechte vor.</div>