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">
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">
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
-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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
