schwimmende Elemente und CSS -Hintergrund color

In der Webentwicklung können Elemente mit CSS eine Herausforderung sein, wenn Szenarien betroffen sind. Dies kann auftreten, wenn Elemente aus dem normalen Fluss des Dokuments unter Verwendung der Eigenschaft "Float" entfernt werden, was zu Problemen mit Dimensionen und Hintergrundfarben übergeordnete Elemente führt. Wir weisen jede Div eine Hintergrundfarbe zu: Rot für Eltern und Grün und Gelb für die schwimmenden Elemente.

. Inhalt { Breite: 960px; Höhe: Auto; Rand: 0 Auto; Hintergrund: Rot; klar: beides; } .links { float: links; Höhe: 300px; Hintergrund: grün; } .Rechts { float: rechts; Hintergrund: Gelb; }

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
}

.left {
    float: left;
    height: 300px;
    background: green;
}

.right {
    float: right;
    background: yellow;
}

Um dieses Problem zu beheben, müssen wir die Änderung des Verhaltens beheben, die auftritt, wenn Elemente schweben. Durch Design werden sie aus dem normalen Dokumentenfluss entfernt und werden im Wesentlichen außerhalb der Grenzen des Elternteils positioniert. Infolgedessen hat der Elternteil keine Möglichkeit, seine Dimensionen zu bestimmen und zum Zusammenbruch zu führen.

Die Lösung liegt darin, den Elternteil zu unterweisen, seine schwimmenden Kinder zu berücksichtigen, indem sie sie dazu zwingt, sie einzudämmen. Dies kann erreicht werden, indem dem übergeordneten Element die Eigenschaft "Überlauf" hinzugefügt wird. Die zulässigen Werte für 'Überlauf' enthalten 'versteckt' und 'auto':

. Inhalt { Überlauf: versteckt; // oder Überlauf: Auto; }

.content {
    overflow: hidden;  // or overflow: auto;
}

. Inhalt { Überlauf: versteckt; ... }

.content {
    overflow: hidden;
    ...
}