CSS-Float wird nicht umbrochen

Beim Erstellen einer Webseite verwenden wir häufig das Float-Attribut von CSS, um mehrere Elemente in derselben Zeile oder Spalte anzuordnen. Aber manchmal werden schwebende Elemente der nächsten Zeile zugewiesen. Zu diesem Zeitpunkt müssen wir einige Fähigkeiten beherrschen, um zu verhindern, dass schwebende Elemente umbrochen werden.

1. Floats löschen

Wenn die Breite nicht festgelegt ist, nimmt das Floating-Element standardmäßig die Breite des übergeordneten Elements ein. Wenn die Höhe des übergeordneten Elements nicht ausreicht, wird das schwebende Element in die nächste Zeile „gequetscht“. Wie kann man dieses Problem lösen? Sie können die Clear-Float-Technik verwenden. Gängige Methoden zum Löschen von Floats sind wie folgt:

1. Verwenden Sie Clearfix

, um die Klasse „clearfix“ zum CSS-Stil des übergeordneten Elements hinzuzufügen, wie unten gezeigt:

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

Fügen Sie in HTML den Klassennamen „clearfix“ hinzu. zum übergeordneten Element, wie unten gezeigt:

<div class="clearfix">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

2. Verwenden Sie eine Pseudoklasse, um Floats zu löschen.

Fügen Sie die Pseudoklasse „:before“ oder „:after“ im CSS-Stil des übergeordneten Elements hinzu, wie unten gezeigt:

.parent:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Geben Sie in HTML dem übergeordneten Element den Klassennamen „parent“ hinzu, wie unten gezeigt:

<div class="parent">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

2. Verwenden Sie display: inline-block

Zusätzlich zum Löschen von Floats, um zu verhindern, dass schwebende Elemente umbrochen werden, können Sie auch die verwenden Attribut „display: inline-block“. Mit diesem Attribut kann das Element die Eigenschaften eines Inline-Blockebenenelements aufweisen. Die Höhe kann unter Beibehaltung der gleichen Zeilenanzeige festgelegt werden.

<div style="display: inline-block;">Inline-block</div>
<div style="display: inline-block;">Inline-block</div>

3. Einstellungsbreite verwenden

Wenn für das schwebende Element eine Breite festgelegt ist, wird es in derselben Zeile angezeigt, auch wenn das übergeordnete Element nicht hoch genug ist.

<div style="width: 50%; float: left;">Left Float</div>
<div style="width: 50%; float: left;">Right Float</div>

4. Elastisches Layout verwenden

Flexibles Layout ist eine von CSS3 bereitgestellte Layoutmethode, die sehr praktisch ist, wenn mehrere Elemente in derselben Zeile oder Spalte angeordnet sind. Um das flexible Layout zu verwenden, müssen Sie nur das Attribut „display:flex“ für das übergeordnete Element festlegen, damit die untergeordneten Elemente ein adaptives Layout ausführen können.

<div style="display: flex;">
    <div style="flex: 1;">Flex 1</div>
    <div style="flex: 1;">Flex 2</div>
</div>

Es gibt verschiedene Möglichkeiten, um das Einwickeln schwebender Elemente zu verhindern. Sie können die für Sie geeignete Methode entsprechend der tatsächlichen Situation auswählen.

Das obige ist der detaillierte Inhalt vonCSS-Float wird nicht umbrochen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!