Zusammenfassung gängiger Methoden zum Löschen von Floats in CSS CSS löscht beides {overflow:auto;zoom:1;}

Es gibt drei häufig verwendete Methoden zum Löschen von Floats:

Dies ist schwebender Quellcode, der nicht gelöscht wurde, und der laufende Code kann dies nicht siehe übergeordnetes Element. Hellgelber Hintergrund.

<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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

Die drei Methoden zum Löschen von Floats sind wie folgt:

1 . Verwenden Sie einen leeren, durchsichtigen Schwimmer. Eine Methode, die ich seit langem verwende. Das leere Tag kann ein P-Tag oder ein P-Tag sein. Ich bin es gewohnt,

zu verwenden, was kurz genug ist. Viele Leute verwenden auch

---

, aber man muss nur den Rand dafür freimachen, aber theoretisch kann es jede beliebige Bezeichnung sein. Diese Methode besteht darin, eine solche Beschriftung hinzuzufügen, um den Float zu löschen, nachdem alle Floating-Elemente innerhalb des Floating-Elternelements gelöscht werden müssen, und den CSS-Code dafür zu definieren: clear:both. Der Nachteil dieses Ansatzes ist die Hinzufügung bedeutungsloser Strukturelemente.

Es handelt sich um eine vom W3Cempfohlene Vorgehensweise zum Löschen von Floats (Schließen von Float-Elementen) mithilfe zusätzlicher Tags. Was die Verwendung des
-Elements oder des leeren

betrifft, können Sie nach Ihren eigenen Vorlieben wählen (natürlich können Sie auch andere Elemente auf Blockebene verwenden). Es ist jedoch zu beachten, dass
selbst über einen zusätzlichen Zeilenumbruch verfügt und seine Höhe daher auf 0 gesetzt werden muss, um seine Leistung zu verbergen. Daher ist es in den meisten Fällen sinnvoller, ein leeres

zu verwenden.

<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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
<p class=”clr”> </p>
</p>

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“ wird verwendet, um mit IE6 kompatibel zu sein, und width:100 % kann ebenfalls verwendet werden.

Die Verwendung von Überlauf kann jedoch Auswirkungen auf die Seitenleistung haben, und diese Auswirkung ist ungewiss. Testen Sie Ihre Ergebnisse am besten auf mehreren Browsern 🎜>

3. Verwenden Sie das After-Pseudoobjekt, um den Float zu löschen.

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }/* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/#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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

Diese Methode ist nur auf Nicht-IE-Browser anwendbar. 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.

<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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

Diese drei Methoden haben ihre eigenen Vor- und Nachteile, wenn ich sie verwende die erste Methode, die zuverlässiger ist.

Das obige ist der detaillierte Inhalt vonZusammenfassung gängiger Methoden zum Löschen von Floats in CSS CSS löscht beides {overflow:auto;zoom:1;}. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!