Warum wird mein schwebendes Element nicht richtig ausgerichtet?

Erwartung vs. Realität des CSS-Float-Verhaltens

In CSS wird die Float-Eigenschaft häufig verwendet, um Elemente horizontal auszurichten. Es kann jedoch zu unerwartetem Verhalten kommen, wenn es zusammen mit anderen Elementen verwendet wird.

Das Problem

Das folgende Beispiel veranschaulicht ein häufiges Missverständnis:

<code class="html"><div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow">floated div</div></code>

<code class="css">.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}</code>

In diesem Beispiel können Sie erwarten, dass das zweite Div (mit dem gelben Hintergrund) rechts vom ersten Div ausgerichtet wird. Wie im Live-Beispiel zu sehen ist, nimmt es jedoch immer noch die gesamte Breite seines Containers ein.

Verstehen des Verhaltens

Dieses Verhalten ist eigentlich das beabsichtigte Ergebnis der Float-Positionierung . Wenn ein Element schwebend ist, fließt der nachfolgende Inhalt auf der rechten Seite dieses Elements nach unten. Die Breite des enthaltenden Blocks (festgelegt durch das folgende Element) ist jedoch immer noch reserviert.

Gemäß der CSS-Spezifikation sind Elemente auf Blockebene (z. B. div und p) vorhanden nicht positioniert ist, ignorieren Sie den Schwimmer. Linienkästen hingegen fließen entlang der Seite des Floats, aber ihre Breite wird verkürzt.

Die Lösung

Um das erwartete Ergebnis zu erzielen, wo der zweite Div korrekt ausgerichtet ist, können Sie dem zweiten Div eine Überlaufeigenschaft mit einem anderen Wert als dem sichtbaren Wert hinzufügen. Dies verhindert, dass es das schwebende Element überlappt, wie in der CSS-Level-2.1-Spezifikation angegeben.

Beispiel

<code class="css">.yellow {
    overflow: hidden;
}</code>

Mit diesem Zusatz wird das zweite Div nicht mehr angezeigt über das schwebende Element hinausragen und so die gewünschte Ausrichtung erzeugen.

Zweck der Überlappung

Überlappungen sind in Situationen nützlich, in denen der nachfolgende Inhalt lang genug ist, um über das schwebende Element hinaus fortzufahren. Wenn Überlappungen standardmäßig eingeschränkt wären, würde der Inhalt nicht unter dem schwebenden Element fortgesetzt, was zu unerwarteten Ergebnissen führen würde.

Das obige ist der detaillierte Inhalt vonWarum wird mein schwebendes Element nicht richtig ausgerichtet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!