Zusammenfassung der Clear-Float-Methoden mit CSS

In diesem Artikel werden hauptsächlich verschiedene Möglichkeiten zur Verwendung von CSS zum Lösen von Floating und Löschen von Floating vorgestellt: 1. Legen Sie die Höhe des übergeordneten Elements fest. 2. Überlauf 3. Fügen Sie das untergeordnete Element (Blockebene) hinzu und legen Sie dessen clear-Attribut fest, um das Problem zu lösen (Trennwandmethode, Innenwandmethode). vorPseudoObjekt Float löschen. Werfen wir einen Blick mit dem Editor unten

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

Wenn ein Element schweben soll, muss sein Vorgängerelement eine Höhe haben. Höhe Nur in einer Box kann der Float geschlossen werden

Solange er in einer Box mit einer Höhe schwebt, hat dieser Float keinen Einfluss auf die nachfolgenden Floating-Elemente 🎜>

Nachteile: Bei der Arbeit werden wir niemals die Höhe aller Felder erhöhen, da dies mühsam ist und sich nicht an schnelle Änderungen auf der Seite anpassen kann.

2. Überlauf

unterstützt die Höhe des Elternelements

Ein Vater kann nicht von seinem schwebenden Sohn getragen werden. . Solange jedoch overflow:hidden; zum Vater hinzugefügt wird, kann der Vater von seinem Sohn verdrängt werden.

overflow:hidden; kann

margin wirksam machen.

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 Schwimmerteile so, dass das schwimmende Element dahinter nicht das schwimmende Element vorne verfolgt.

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

Das obige ist der detaillierte Inhalt vonZusammenfassung der Clear-Float-Methoden mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!