Float-Over-Hilfe in HTML

Wenn Sie Webseiten mit einfachem HTML- und CSS-Code für Ihr Unternehmen erstellen, können Sie mithilfe von CSS bestimmte "Unterteilungen" in Ihrem Inhalt formatieren und formatieren, die in Ihrem HTML-Code definiert sind. So können Sie Text und Bilder auf diese Weise formatieren dass sie sich "umwickeln" oder sich aneinander anpassen. Mit anderen Worten, Teile Ihres Inhalts können sich an andere Abschnitte anpassen, die so angeordnet sind, dass Bilder und Text als Spalten, Raster oder eine andere festgelegte Ausrichtung zusammenpassen.

HTML und CSS

Während HTML eine mit Tags versehene Metasprache darstellt, die definiert, wie eine Webseite in einem Webbrowser angezeigt wird, besteht die wirkliche Kraft des Webdesigns darin, dass Sie HTML mit Cascading Style Sheets mischen. CSS definiert Verhalten für Elemente, die in HTML-Dateien eingebettet sind, und erstellt ein universelles Layout für die Seite. Mehrere HTML-Dokumente können auf dieselbe CSS-Seite verweisen, was bedeutet, dass Sie auf allen Seiten ein normales Erscheinungsbild erzwingen können.

HTML-Abteilungen und Floating

CSS arbeitet mit HTML, indem es das Verhalten von HTML-Tags definiert. Insbesondere nutzt CSS die "" Tags. Diese Unterteilungs-Tags umgeben einen Teil des Dokuments und identifizieren es als diskrete Informationseinheit, die überall denselben Stil haben sollte. Diese Unterteilungen fungieren auch als "Boxen", dh durch CSS können Sie die Farbe des Inhalts ändern, die Größe ändern oder auf eine bestimmte Seitenbegrenzung "fließen", so dass die Seitengröße das Layout nicht ruiniert.

In CSS und HTML schweben

Um das Attribut "float" verwenden zu können, erstellen Sie eine Unterteilung in Ihrem Inhalt oder beziehen sich auf ein Bild. In Ihrem CSS-Dokument referenzieren Sie dann dieses div oder Bild anhand des Namens und geben ihm ein Float-Attribut. Das folgende Codebeispiel zeigt, wie Sie dies mit einem internen Stylesheet erreichen. Beachten Sie, dass die Division im HTML-Format "section1" eine Breite von 100 Pixel hat. Alle Bereiche, die Float verwenden, benötigen eine bestimmte Breite. Bilder haben bereits eine implizite Breite:

Klar, Ränder und Polsterung

Neben den Grundlagen der Verwendung des Float-Attributs können Sie auch andere Elemente verwenden, beispielsweise die Attribute clear, margin und padding. Das clear-Attribut stellt sicher, dass kein anderer Inhalt in derselben Zeile wie das Floating-Element angezeigt wird. Ränder steuern den Raum um den linken und unteren Bereich der Division. Die Auffüllung steuert den inneren Raum in der Trennung zwischen Inhalt und Grenzen der Division. Durch diese drei Elemente können saubere, "kastenförmige" Unterteilungen erstellt werden, die Text oder andere Bilder umschließen lassen oder nicht.