Wie viele Möglichkeiten hat CSS, Floats zu löschen?

Dieses Mal zeige ich Ihnen, wie viele CSS- Möglichkeiten es gibt, Floats zu löschen und welche Vorsichtsmaßnahmen für das Löschen von Floats gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

1. Legen Sie die Höhe des übergeordneten Elements fest

Wenn ein Element schweben soll, muss sein Vorgängerelement eine Höhe haben, die die Höhe schließen kann

Solange es in einer Box mit einer Höhe schwebt, hat dieses Schweben keinen Einfluss auf die nachfolgenden schwebenden Elemente. Die Auswirkungen des Schwebens werden also beseitigt.

Nachteile: Bei der Arbeit werden wir niemals die Höhe aller Boxen erhöhen, da dies mühsam ist und sich nicht an schnelle Seitenwechsel anpassen lässt.

2. Überlauf

Unterstützen Sie die Höhe des übergeordneten Elements

Ein Vater kann nicht sein sich selbst Der schwebende Sohn streckte sich in die Höhe. Solange jedoch overflow:hidden zum Vater hinzugefügt wird, kann der Vater vom Sohn nach oben geschoben werden.

overflow:hidden; ermöglicht die Wirksamkeit der Marge.

overflow:hidden;
overflow:auto;

Nachteil: Wenn Überlaufinhalte angezeigt werden sollen, werden diese gleichzeitig auch ausgeblendet.

3. Fügen Sie untergeordnete Elemente (Blockebene) hinzu und legen Sie ihren klaren Attributwert auf beide fest, um das Problem zu lösen

<p>
      <p></p>
      <p></p>
     <p></p>
  </p>
   <p>   → clear:both;
       <p></p>
       <p></p>
     <p></p>
  </p>

Das einfachste Lösung Die Möglichkeit, Floats zu löschen, besteht darin, der Box „clear:both“ hinzuzufügen; sie stellt ihre eigenen internen Elemente dar und wird von anderen Boxen nicht beeinflusst.

Nachteil: Marge ist ungültig. Es gibt keine Lücke zwischen den beiden ps.

3.1. Trennwandmethode:

Bauen Sie eine Wand zwischen den beiden schwimmenden Elementen. Trennen Sie die beiden Teile des Schwimmkörpers, sodass das Schwimmelement dahinter nicht dem Schwimmelement vorne nachjagt.

Die Wand nutzt ihren eigenen Körper als Lücke.

<p>
       <p></p>
       <p></p>
       <p></p>
  </p>
   <p class="clear"></p>
   <p>
      <p></p>
      <p></p>
      <p></p>
  </p>

Wir haben festgestellt, dass die Partitionsmethode einfach zu verwenden ist, das erste p jedoch immer noch keine Höhe hat. Wenn wir nun wollen, dass das erste p automatisch seine Höhe basierend auf seinem eigenen Sohn erreicht.

3.2. Innenwandmethode:

<p>
       <p></p>
       <p></p>
       <p></p>
       <p class="clear"></p>
   </p>
  <p>
       <p></p>
      <p></p>
      <p></p>
  </p>

Vorteile der Innenwandmethode Das heißt, es verhindert nicht nur, dass das p im hinteren Teil dem p im vorderen Teil nachjagt, sondern unterstützt auch die Höhe des ersten p.

Auf diese Weise können der Hintergrund und der Rand dieses p entsprechend der Höhe von p gestreckt werden

4. Verwendung nach oder vor Pseudoobjekten um Floats zu löschen

p:after{content:"";display:block;clear:both;}
p:before{content:"";display:block;clear:both;}

Diese Methode wird häufiger verwendet und es wird empfohlen, diese Methode im Projekt zu verwenden

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Reagieren und CSS3 implementieren WeChat-Animation zum Öffnen roter Umschläge
CSS-Hintergrund -Detaillierte Erläuterung der Verwendung von Anhängen

CSS3-Animationsbeispiel für das Klicken zum Vergrößern

Das obige ist der detaillierte Inhalt vonWie viele Möglichkeiten hat CSS, Floats zu löschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!