Floats
Ursprünglich zur Einbettung von Bildern in Textblöcken gedacht, wurde die float-Eigenschaft zu einem der am häufigsten verwendeten Werkzeuge zur Erstellung mehrspaltiger Layouts auf Webseiten. Mit dem Aufkommen von Flexbox und Grid kehrt sie nun zu ihrem ursprünglichen Zweck zurück, wie dieser Artikel erklärt.
| Voraussetzungen: | Strukturierung von Inhalten mit HTML, CSS Styling-Grundlagen, Grundlegende Text- und Schriftgestaltung, Vertrautheit mit Grundkonzepten des CSS-Layouts. |
|---|---|
| Lernziele: |
|
Der Hintergrund von Floats
Die float-Eigenschaft wurde eingeführt, um Webentwicklern zu ermöglichen, Layouts zu erstellen, bei denen ein Bild innerhalb einer Textspalte schwebt und der Text links oder rechts davon herumläuft. Eine Art Layout, das man möglicherweise in einer Zeitungsseite findet.
Webentwickler erkannten jedoch schnell, dass man nicht nur Bilder, sondern alles schweben lassen kann, weshalb die Verwendung von Float erweitert wurde, z.B. auf unterhaltsame Layout-Effekte wie Initialkappen.
Floats wurden üblicherweise verwendet, um gesamte Webseiten-Layouts zu erstellen, bei denen mehrere Informationsspalten so schweben, dass sie nebeneinander erscheinen (das Standardverhalten wäre, dass die Spalten untereinander im selben Dokumentfluss erscheinen). Es gibt neue, bessere Layout-Techniken. Die Verwendung von Floats auf diese Weise sollte als veraltete Technik betrachtet werden.
In diesem Artikel konzentrieren wir uns nur auf die richtigen Verwendungen von Floats.
Ein Float-Beispiel
Lassen Sie uns die Verwendung von Floats erkunden. Wir beginnen mit einem Beispiel, bei dem ein Textblock um ein Element herum schwebt. Sie können folgen, indem Sie eine neue index.html-Datei auf Ihrem Computer erstellen, sie mit einer HTML-Vorlage füllen und den untenstehenden Code an den entsprechenden Stellen einfügen. Am Ende des Abschnitts können Sie ein Live-Beispiel sehen, wie der endgültige Code aussehen sollte.
Zuerst beginnen wir mit etwas HTML. Fügen Sie das Folgende Ihrem HTML-Body hinzu und entfernen Sie alles, was dort zuvor war:
<h1>Float example</h1>
<div class="box">Float</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet.
</p>
<p>
Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
a urna. Ut id ornare felis, eget fermentum sapien.
</p>
<p>
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
Wenden Sie nun das folgende CSS auf Ihr HTML an (verwenden Sie ein <style>-Element oder einen <link> zu einer separaten .css-Datei – Ihre Wahl):
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font:
0.9em/1.2 Arial,
Helvetica,
sans-serif;
}
.box {
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207 232 220);
padding: 1em;
}
Wenn Sie speichern und aktualisieren, sehen Sie etwas Ähnliches, wie Sie es erwarten würden: Die Box befindet sich über dem Text, im normalen Fluss.
Die Box floaten
Um die Box schweben zu lassen, fügen Sie die Eigenschaften float und margin-right zur .box-Regel hinzu:
.box {
float: left;
margin-right: 15px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207 232 220);
padding: 1em;
}
Wenn Sie jetzt speichern und aktualisieren, sehen Sie etwas wie folgt:
Lassen Sie uns darüber nachdenken, wie das Floaten funktioniert. Das Element mit der festgelegten Float-Eigenschaft (in diesem Fall das <div>-Element) wird aus dem normalen Layoutfluss des Dokuments herausgenommen und an die linke Seite seines übergeordneten Containers (in diesem Fall <body>) verankert. Jeglicher Inhalt, der im normalen Layoutfluss unter dem schwebenden Element erscheinen würde, wickelt sich nun um es herum und füllt den Raum auf der rechten Seite bis zur Höhe des schwebenden Elements aus. Dort stoppt es.
Wenn Sie den Inhalt nach rechts schweben lassen, hat dies genau den gleichen Effekt, jedoch umgekehrt: Das schwebende Element wird an die rechte Seite geklebt, und der Inhalt wird sich um es nach links herum wickeln. Versuchen Sie, den Float-Wert auf right zu ändern und margin-right durch margin-left im letzten Regelset zu ersetzen, um das Ergebnis zu sehen.
Das Float visualisieren
Während wir dem Float einen Rand hinzufügen können, um den Text wegzuschieben, können wir keinen Rand zum Text hinzufügen, um ihn wegzubewegen. Dies liegt daran, dass ein schwebendes Element aus dem normalen Fluss genommen wird und die Boxen der folgenden Elemente tatsächlich hinter dem Float verlaufen. Dies können Sie sehen, indem Sie einige Änderungen an Ihrem Beispiel vornehmen.
Fügen Sie dem ersten Textabschnitt, der sich unmittelbar nach der schwebenden Box befindet, eine Klasse special hinzu, und fügen Sie dann in Ihrem CSS die folgenden Regeln hinzu. Diese geben unserem folgenden Absatz eine Hintergrundfarbe.
.special {
background-color: rgb(148 255 172);
padding: 10px;
color: purple;
}
Um den Effekt besser sichtbar zu machen, ändern Sie das margin-right bei Ihrem Float in margin, sodass Sie Platz um den gesamten Float haben. Sie werden sehen, dass der Hintergrund beim Absatz direkt unter der schwebenden Box verläuft, wie im folgenden Beispiel.
Die Linienboxen unseres folgenden Elements wurden verkürzt, sodass der Text um den Float herumläuft, aber aufgrund des Floats, der aus dem normalen Fluss entfernt wurde, bleibt die Box um den Absatz dennoch in voller Breite erhalten.
Floats entfernen
Wir haben gesehen, dass ein Float aus dem normalen Fluss entfernt wird und dass andere Elemente neben ihm angezeigt werden. Wenn wir verhindern möchten, dass das folgende Element nach oben rutscht, müssen wir es bereinigen; dies wird mit der clear-Eigenschaft erreicht.
Fügen Sie in Ihrem HTML aus dem vorherigen Beispiel der zweiten Absätzebene unter dem schwebenden Element eine Klasse cleared hinzu. Fügen Sie dann Folgendes zu Ihrem CSS hinzu:
.cleared {
clear: left;
}
Sie sollten sehen, dass der zweite Absatz das schwebende Element jetzt bereinigt und nicht mehr daneben erscheint. Die clear-Eigenschaft akzeptiert die folgenden Werte:
left: Elemente klären, die nach links schweben.right: Elemente klären, die nach rechts schweben.both: Alle schwebende Elemente klären, links oder rechts.
Boxen bereinigen, die um einen Float herumgezogen werden
Sie wissen nun, wie Sie etwas bereinigen, das einem schwebenden Element folgt, aber sehen wir uns an, was passiert, wenn Sie einen hohen Float und einen kurzen Absatz haben, mit einer Box, die um beide Elemente herumgezogen wird.
Das Problem
Ändern Sie Ihr Dokument so, dass der erste Absatz und die schwebende Box gemeinsam mit einem <div> umwickelt sind, das eine Klasse wrapper hat.
<div class="wrapper">
<div class="box">Float1</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
ultricies tellus laoreet sit amet.
</p>
</div>
Fügen Sie in Ihrem CSS die folgende Regel für die Klasse .wrapper hinzu und laden Sie die Seite dann neu:
.wrapper {
background-color: rgb(148 255 172);
padding: 10px;
color: purple;
}
Entfernen Sie zusätzlich die ursprüngliche Klasse .cleared:
.cleared {
clear: left;
}
Sie werden sehen, dass ähnlich wie in dem Beispiel, bei dem wir die Hintergrundfarbe auf den Absatz angewendet haben, die Hintergrundfarbe hinter dem Float verläuft.
Auch hier liegt das daran, dass der Float aus dem normalen Fluss entfernt wurde. Sie könnten erwarten, dass durch das gemeinsame Einhüllen der schwebenden Box und des Textes des ersten Absatzes, der sich um den Float wickelt, der nachfolgende Inhalt von der Box bereinigt wird. Aber das ist nicht der Fall.
display: flow-root
Um dieses Problem zu lösen, wird der Wert flow-root der display-Eigenschaft verwendet. Dieser existiert nur, um dieses spezifische Problem ohne Verwendung von Hacks zu lösen – es wird keine unbeabsichtigten Konsequenzen geben, wenn Sie ihn verwenden.
.wrapper {
background-color: rgb(148 255 172);
padding: 10px;
color: purple;
display: flow-root;
}
Testen Sie Ihre Fähigkeiten!
Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können einige weitere Tests finden, um zu überprüfen, dass Sie diese Informationen beibehalten haben, bevor Sie weitermachen – siehe Testen Sie Ihre Fähigkeiten: Floats.