So nutzen Sie CSS clever: beides zum Löschen von Floats (mit Code)

Während des Seitenlayouts werden Floats häufig verwendet, und Floats müssen unbedingt gelöscht werden. In diesem Artikel erfahren Sie, wie Sie clear:both zum Löschen von Floats verwenden. , hoffe es hilft dir!

Wenn wir beim Erstellen von Webseiten div+css oder xhtml+css verwenden, werden wir auf einige sehr seltsame Situationen stoßen. Das Layout ist offensichtlich korrekt, aber das ganze Bild sieht unter IE6 normal aus , wenn ich es mir im IE7 oder Firefox ansehe, ist alles ein Chaos. Egal wie ich es berechne, ich kann das Layout einfach nicht korrigieren. Tatsächlich wird all dies durch Floating verursacht, was in CSS Float ist. Um das Problem zu lösen, müssen Sie clear:both verwenden.

Das CSS-Handbuch erklärt dies: Der Wert dieser Eigenschaft gibt die Seite an, auf der schwebende Objekte nicht erlaubt sind. Dieses Attribut wird verwendet, um die physische Position des Float-Attributs im Dokumentstrom zu steuern.

Wenn das Attribut auf Float (Float) gesetzt ist, befindet sich seine physische Position bereits außerhalb des Dokumentflusses, aber meistens hoffen wir, dass der Dokumentfluss Float (Float) oder erkennen kann Wir hoffen, dass Float (Float) die folgenden Elemente nicht von Float beeinflusst. Zu diesem Zeitpunkt müssen wir Clear verwenden: Both zum Löschen.

Programmcode:

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>

Wenn es nicht erforderlich ist, den Float zu löschen, wird der Text in der 3. Spalte zusammen mit dem Text in der 1. und 2. Spalte angezeigt, also fügen wir a hinzu clear float in der 3. Spalte clear:both;

Normalerweise neigen wir dazu, einen separaten CSS-Stil für „clear float“ zu definieren, wie zum Beispiel:

Programmcode

.clear {
clear: both;
}

und verwenden Sie dann < div class="clear">

, um Floats gezielt zu löschen.
Einige Leute sind jedoch anderer Meinung, dass Sie nicht

schreiben und es einfach direkt in der unteren Ebene löschen müssen.
Zum Beispiel muss der ursprünglich gute

Programmcode

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>

in einen

Programmcode

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<div class="clear"></div>
<p>这个是第3列。</p>

ab diesem Zeitpunkt umgewandelt werden Aus Sicht < ;div class="clear">