Detaillierte grafische Erklärung von CSS klar: Beide klären die Verwendung von Floats

Wenn wir div + CSS für das Seitenlayout verwenden, treten häufig unerwartete Ergebnisse auf, z. B. das Layout des Bildschirms ist durcheinander, der gewünschte Stil wird nicht angezeigt oder einige Attribute sind nicht wirksam, diese seltsamen Dinge Alles sehr lästig. Tatsächlich werden diese unerwarteten Dinge durch float verursacht, für das es auch eine Lösung gibt. In diesem Artikel erfahren Sie, wie Sie „clear: Both“ zum Löschen von Floating verwenden, damit die Seite wieder normal wird. Für diejenigen, die beides nicht verstehen, können Sie darauf zurückgreifen. Ich hoffe, es wird Ihnen nützlich sein.

Zunächst einmal sollte sich jeder einiger Eigenschaften von Floating Float bewusst sein. Wenn für ein Element Floating festgelegt ist, entspricht dieses Element einem Element auf Blockebene. Wenn die Breite und Höhe festgelegt werden, werden die Elemente dahinter aus dem Standardfluss ausgebrochen, wenn die untergeordneten Elemente im übergeordneten Element vorhanden sind Das Element besteht aus schwebenden Elementen, und das übergeordnete Element ist ein hochadaptives Problem.

1. CSS-Clear-Attribut

Attributwert:
keine: Floating-Objekte sind auf beiden Seiten zulässig
Beide: Floating-Objekte sind nicht zulässig
links: Schwebende Objekte sind auf der linken Seite nicht erlaubt
rechts: Schwebende Objekte sind auf der rechten Seite nicht erlaubt

Schreibbeispiel: #box{clear: Both/left/right/none}

2. Anwendbare Szenarien für Clear: Beide zum Löschen von Floats

Im Seitenlayout ist das Seitenlayout nach der Verwendung von Floats normalerweise verwirrend: beide, um Schwimmer zu löschen. Um ein gängiges Beispiel zu nennen: In einem großen Feld gibt es keine Höhe, und für das kleine Feld wird der CSS-Float-Stil verwendet normal angezeigt wird, müssen wir „clear:both“ verwenden, um Floats zu löschen und die Seite wieder in den Normalzustand zu versetzen.

3. Anwendungsbeispiele von klar: beides

Beschreibung: Stellen Sie die Länge der großen Box außen auf 500 Pixel ein, geben Sie ihr keine Höhe, sondern lassen Sie sie stehen Für sich genommen ist der Rand (CSS-Rahmen) rot und der Hintergrund (CSS-Hintergrund) rosa. Im großen Feld befinden sich zwei kleine Felder. Eines ist auf „float:right“ und das andere auf „float:left“ eingestellt. Die Hintergrundfarbe ist grün, die Breite beträgt 200 Pixel und die Höhe beträgt 150 Pixel. Werfen wir als Nächstes einen Blick darauf, welchen Effekt das Schweben hat. Der Code lautet wie folgt:

HTML-Teil:

<div class="box"> 
      <div class="left">左浮动left</div> 
      <div class="right">右浮动right</div> 
  </div>

CSS-Teil:

.box{width:500px;background:pink;border:1px solid #F00;padding:5px;} 
   .left,.right{background:#008000;width:200px;height:150px;} 
   .left{ float:left;}
   .right{ float:right;}

Rendering:

Zwei small Die Box zeigt den gewünschten Effekt, einer schwebt nach links und einer nach rechts, aber unser großer Kasten ist nicht geöffnet. Dieses Phänomen wird durch das Schweben verursacht. Als nächstes verwenden Sie „clear: Both“, um den Schwimmer zu löschen und zu prüfen, ob die große Kiste geöffnet werden kann.

Wir fügen ein leeres Div vor dem

-Tag des großen Felds hinzu (das Div ist das letzte Unterfeld des großen Felds) und fügen diesem leeren Div einen CSS-Stil hinzu, klar: beides , Code wie folgt:

HTML-Teil:

<div class="box"> 
      <div class="left">左浮动left</div> 
      <div class="right">右浮动right</div> 
      <div class="clear"></div>
</div>

CSS-Teil:

.box{width:500px;background:pink;border:1px solid #F00;padding:5px;} 
   .left,.right{background:#008000;width:200px;height:150px;} 
   .left{ float:left;}
   .right{ float:right;}
   .clear{clear: both;}

Rendering:

Siehe die Bild auf einen Blick Mit „clear“ können Sie den von float erzeugten Float löschen. Achten Sie auf die Hinzufügungsposition des Clear-Style-Objekts. Fügen Sie es vor dem Ende des div-Tags dieses Objekts hinzu, um das interne kleine Kästchen zu löschen und ein Floating zu erstellen. Im Allgemeinen wird „clear:both“ üblicherweise zum Löschen von Floats verwendet. Was das andere „clear:left“ und „clear:right“ betrifft, gibt es hier keine Demonstration. Freunde, die es benötigen, können es selbst üben, um zu sehen, welche Wirkung es hat.

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung von CSS klar: Beide klären die Verwendung von Floats. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!