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 1bfe0498b90cca37754770ffe84d5e6816b28748ea4df4d9c2150843fecfba68, um Floats gezielt zu löschen.
Einige Leute sind jedoch anderer Meinung, dass Sie nicht 266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68 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">16b28748ea4df4d9c2150843fecfba68Es besteht wirklich keine Notwendigkeit zu schreiben.
Aber offensichtlich haben wir immer noch eine sehr häufige Situation im Webdesign:

Programmcode

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
</div>
<p style="clear:both;">第三段内容</p>

Der Seitentest unter IE funktioniert wie erwartet: Blau Es gibt zwei Farben Innerhalb des Farbblocks befinden sich rote und gelbe Blöcke, und unter dem blauen Block befindet sich ein dritter Text.

Aber die Wirkung von FF ist nicht so. Wir können nicht einfach die nächste Ebene löschen, um unsere Arbeit abzuschließen, wir müssen sie rechtzeitig „löschen“, bevor die Beschriftung, auf der sich das schwebende Element befindet, geschlossen wird.

Programmcode

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

Für die zusätzlichen 266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68-Tags, die dazu führen, dass sich die Höhe von IE und FF ändert, lautet die Lösung wie folgt folgt:

Programmcode

clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}

Programmcode

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

Das obige ist der detaillierte Inhalt vonSo nutzen Sie CSS clever: beides zum Löschen von Floats (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!