Beispiele zur Erläuterung verschiedener Methoden zur Verwendung von CSS zum Entfernen von Floating-Front-End-Fragen und Antworten-php.cn

Beispiele zur Erläuterung verschiedener Methoden zur Verwendung von CSS zum Entfernen von Floating

PHPz

Freigeben： 2023-04-06 16:58:42

Original

1103 Leute haben es durchsucht

Im CSS-Layout ist Float ein sehr wichtiges Attribut. Durch Festlegen der Floating-Richtung von Elementen können Sie problemlos Seitenlayouteffekte erzielen. Allerdings können schwebende Elemente auch einige Probleme verursachen, insbesondere wenn das übergeordnete Element keine Höhe festlegt. Schwebende untergeordnete Elemente können dazu führen, dass die Höhe des übergeordneten Elements reduziert wird, was zu Verwirrung im Seitenlayout führt. Daher ist das korrekte Entfernen von Floats auch ein wichtiger Teil der Webentwicklung.

In diesem Artikel zeigen wir anhand von Beispielen einige Methoden zum Entfernen von Floats, einschließlich des Löschens von Floats, der Verwendung von Pseudoelementen, der Verwendung von CSS Grid und anderen Techniken.

1. Floats löschen

Eine der häufigsten Methoden ist das Löschen von Floats. Wir können nach dem übergeordneten Element oder dem schwebenden Element ein klares schwebendes Tag hinzufügen, um den Effekt zu erzielen, dass schwebende Elemente entfernt werden.

Es gibt viele Möglichkeiten, Floats zu löschen. Die üblichere Methode besteht darin, ein leeres Tag zu verwenden und den Effekt des Löschens von Floats über CSS festzulegen. <div>和<span>

Wenn ein übergeordnetes Element beispielsweise mehrere schwebende Elemente enthält, können wir am Ende des Elements ein leeres div-Tag hinzufügen und dann das Attribut „clear:both“ zum Tag in der CSS-Datei hinzufügen.

<div class="parent">
  <div class="child-float"></div>
  <div class="child-float"></div>
  <div class="clear-fix"></div>
</div>

.clear-fix{
  clear:both;
}

Nach dem Login kopieren

Auf diese Weise können wir den Float des übergeordneten Elements einfach entfernen.

2. Verwenden Sie Pseudoelemente

Zusätzlich zum Löschen von Floats können wir auch CSS-Pseudoelemente verwenden, um die durch Floating-Elemente verursachten Probleme zu lösen. In CSS3 können wir die Pseudoelemente :before und :after verwenden, die das Hinzufügen eines virtuellen Elements vor bzw. nach dem Element darstellen.

Wir können das Pseudoelement ::after zum übergeordneten Element hinzufügen, um das Floating seiner untergeordneten Elemente zu löschen. Die spezifische Methode besteht darin, dem übergeordneten Element eine Clearfix-Klasse (z. B. clearfix::after) hinzuzufügen und dann hinzuzufügen .clearfix::after in der CSS-Datei. Fügen Sie einfach content: „“; display: block;

<div class="parent clearfix">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

Nach dem Login kopieren

Darüber hinaus können wir auch Pseudoelemente verwenden, um umschließende Ebenen zu schwebenden Elementen hinzuzufügen. Die spezifische Methode besteht darin, den schwebenden Elementen ::before und ::after Pseudoelemente hinzuzufügen und den Inhalt festzulegen: „“; Pseudoelemente. :table-Attributwert, damit der Effekt einer Wrapping-Ebene erzielt werden kann.

<div class="parent">
  <div class="float-wrap">
    <div class="child-float"></div>
    <div class="child-float"></div>
  </div>
</div>

.float-wrap::before, .float-wrap::after{
  content:"";
  display:table;
}

.float-wrap::after{
  clear:both;
}

Nach dem Login kopieren

3. Verwenden Sie CSS Grid

CSS Grid ist eine neue Layoutmethode, die eine flexiblere Layoutmethode bietet. Durch die Verwendung von CSS Grid können wir problemlos komplexe Seitenlayouteffekte erzielen. Wenn wir CSS Grid verwenden, können wir die Eigenschaft „grid-auto-rows“ verwenden, um die Zeilenhöhe automatisch an die Höhe der untergeordneten Elemente anzupassen.

<div class="parent-css-grid">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

.parent-css-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

Nach dem Login kopieren

In diesem Beispiel stellen wir das übergeordnete Element auf das Rasterlayout ein, legen dann zwei Spalten (1fr und 1fr) fest und verwenden die Eigenschaft „grid-auto-rows“, um die Zeilenhöhe automatisch an die Höhe der untergeordneten Elemente anzupassen . Selbst wenn die untergeordneten Elemente schwebend sind, können sie auf diese Weise problemlos mit verschiedenen Browsern kompatibel sein.

Zusammenfassung

Mit der oben genannten Methode können wir das Schweben einfach entfernen und die Probleme vermeiden, die durch den Höhenkollaps des übergeordneten Elements verursacht werden. Natürlich kann es in verschiedenen Szenarien unterschiedliche Floating-Lösungen geben. Die Auswahl der richtigen Lösung kann uns helfen, den Seitenlayouteffekt zu verbessern und die Effizienz der Webentwicklung zu verbessern.

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung verschiedener Methoden zur Verwendung von CSS zum Entfernen von Floating. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!