Mehrere Möglichkeiten zum Löschen von Floats in CSS

Mehrere Methoden zum Löschen von Floats in CSS

In CSS sind Floating-Elemente eine häufig verwendete Layoutmethode. Floating-Elemente können jedoch auch Probleme wie Höheneinbußen bei übergeordneten Elementen und Überlauf bei untergeordneten Elementen verursachen. Daher ist die Verwendung von Methoden erforderlich Schwimmer räumen.

Hier sind einige praktische Möglichkeiten, Floats zu löschen:

1. Verwenden Sie das Clear-Attribut.

Das Clear-Attribut kann den Floating-Status eines Elements festlegen. Es hat die folgenden Werte:

1. clear: keine (Standardwert). dass das Element den Float nicht löscht;
2. clear: left bedeutet, dass das linke Floating-Element unter dem Element nicht erlaubt ist, das heißt, der linke Float ist gelöscht;
3. clear: right bedeutet, dass das rechte Floating-Element nicht erlaubt ist unter dem Element, das heißt, der rechte Float wird gelöscht;
4. klar: Beides bedeutet, dass unter dem Element keine Floating-Elemente zulässig sind, das heißt, der linke und der rechte Float werden gleichzeitig gelöscht

Zum Beispiel: Der folgende Code implementiert einen Clearing-Effekt von Floats:

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div style="clear:both;"></div>
</div>

Im obigen Code fügen wir in der letzten Zeile ein leeres div-Tag hinzu und setzen dann den Attributwert „clear“ seines Stils auf „Da“ und „Höhe“ des Elements Wenn sie nicht festgelegt sind, handelt es sich lediglich um ein leeres Tag, sodass das Seitenlayout nicht beeinträchtigt wird, der schwebende Effekt jedoch beseitigt werden kann.

Verbessern Sie den obigen Code und abstrahieren Sie das leere div-Tag in eine Klasse. Der Code lautet wie folgt:

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

Im obigen Code fügen wir height: 0; overflow: versteckt hinzu, um das zu verbergen leeres div-Tag, damit es das Seitenlayout nicht beeinträchtigt.

2. Pseudoelemente verwenden

In CSS3 können Sie Pseudoelemente verwenden, um den Floating-Effekt zu löschen, wie unten gezeigt:

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

Im obigen Code haben wir dem übergeordneten Element eine Clearfix-Klasse hinzugefügt und das Pseudoelement verwendet: after Löschen Sie den Floating-Effekt, indem Sie content: ''; display: table;

3. Verwenden Sie das Überlaufattribut

Wenn Sie das Überlaufattribut des übergeordneten Elements auf „Ausgeblendet“, „Auto“ oder „Scrollen“ setzen, kann der Float ebenfalls gelöscht werden, wie unten gezeigt:

.parent {
  overflow: hidden;
}

.parent {
  overflow: auto;
}

.parent {
  overflow: scroll;
}

Die oben genannten drei Stileinstellungen können den Float löschen, aber wenn der Höhe des schwebenden Elements überschreitet Wenn das übergeordnete Element verwendet wird, werden Bildlaufleisten angezeigt, die sich auf die Schönheit und Benutzerfreundlichkeit der Seite auswirken.

4. Verwenden Sie BFC (Formatierungskontext auf Blockebene)

Wenn ein Element das BFC-Attribut hat, wird das Floating-Element darin eingeschlossen, um den Effekt des Löschens des Floats zu erzielen. Die Syntax von BFC lautet wie folgt:

.element {
  display: block; /* 块级元素 */
  overflow: auto; /* 触发BFC */
}

Im obigen Code setzen wir das Attribut display:block; overflow:hidden; auf das zu löschende und schwebende Element und lösen so den BFC-Effekt aus.

Zusammenfassend lässt sich sagen, dass wir je nach tatsächlichem Bedarf verschiedene Methoden zum Löschen von Floats wählen können, um schöne und vernünftige Layouteffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonMehrere Möglichkeiten zum Löschen von Floats in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!