Fließende Elemente

Eine sehr mächtige Positioniertechnik ist die "schwebende". Hiermit können Sie ein Block-Level-Element aus der normalen Reihenfolge entfernen und andere Elemente um dieses Element herum schweben lassen. Dies kann zum Beispiel verwendet werden, um ein Bild nach links oder rechts zu platzieren, während Text darüber schwebt, wie es in Zeitschriften und Zeitungen zu sehen ist. Dies ist jedoch nicht die Standardeinstellung für HTML und CSS, wenn Sie ein Bild neben Text platzieren. Schauen Sie sich dieses Beispiel an, um zu sehen, was ich meine:

<style type="text/css">  
.container {  
    width: 300px;  
    background-color: Gainsboro;  
    padding: 10px;  
    text-align: justify;  
}  
</style>  

<div class="container">  
    <img src="http://www.css3-tutorial.net/images/csstutorial_logo.png">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat metus, sit amet egestas dui rutrum sed. Aliquam eget fringilla metus, vel pulvinar turpis. Mauris consectetur purus convallis nibh consectetur, nec mattis nisi euismod.  

</div>

Wie Sie sehen, beginnt der Text in der unteren rechten Ecke des Bilds, anstatt nur den gesamten freien Platz rechts vom Bild zu belegen. Noch schlimmer wäre, wenn Sie versuchen würden, andere Inhalte auf Blockebene neben dem Text anzuordnen. Die einfachste Lösung besteht darin, das Bild entweder nach links oder nach rechts schweben zu lassen. Dadurch werden die umgebenden Elemente "hochgezogen", damit sie den verbleibenden Raum nutzen können.

Lassen Sie uns nun ein bisschen schwebende Magie zum ersten Beispiel hinzufügen, damit Sie den Unterschied sehen können:

<style type="text/css">
.container {
    width: 300px;
    background-color: Gainsboro;
    padding: 10px;
    text-align: justify;
}

.image {
    float: left;
    margin: 0 10px 10px 0;
}
</style>

<div class="container">
    <img src="http://www.css3-tutorial.net/images/csstutorial_logo.png" class="image">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat metus, sit amet egestas dui rutrum sed. Aliquam eget fringilla metus, vel pulvinar turpis. Mauris consectetur purus convallis nibh consectetur, nec mattis nisi euismod.
</div>

Beachten Sie, wie der Text jetzt nach oben verschoben wird, damit er den verfügbaren Platz rechts vom Bild nutzt. Das liegt daran, dass das Bild jetzt schwebt und daher andere Elemente neben dem Bild angezeigt werden können - sowohl Inline- als auch Blockelemente. Ändern Sie den Wert der float -Eigenschaft von left in right und sehen Sie, wie einfach es ist, ein cooles, magazin- / zeitungsähnliches Aussehen zu erhalten !

Löschen nach dem schweben

Wenn Sie mit dem "schwebenlassen" Ihrer Elemente beginnen, werden Sie sehr wahrscheinlich bald auf ein häufiges Problem stoßen: Wenn Sie ein Floating-Element haben, wird der gesamte Inhalt danach nach oben verschoben, wenn genügend Speicherplatz vorhanden ist. Lassen Sie es mich anhand eines Beispiels veranschaulichen:

<style type="text/css">  
.container {  
    width: 300px;  
    background-color: Gainsboro;  
    padding: 10px;  
    text-align: justify;  
}  

.image {  
    float: left;  
    margin: 0 10px 10px 0;  
}  

.footer {  
    background-color: Azure;  
    text-align: center;  
}  
</style>  

<div class="container">  
    <img src="http://www.css3-tutorial.net/images/csstutorial_logo.png" class="image">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat metus, sit amet egestas dui rutrum sed.  
    <div class="footer">Footer</div>  
</div>

In diesem Fall soll das Fußzeilenelement den gesamten Platz nach dem Bild des Texts einnehmen. Da der Text jedoch nicht genügend Platz einnimmt, wird die Fußzeile direkt unter den Text verschoben und dann teilweise vom Bild überlappt . Die Lösung für dieses Problem ergibt sich aus der Eigenschaft clear. Es wurde speziell entwickelt, um vorhandene Floats zu löschen, sodass die Elemente wieder so angeordnet werden, wie Sie es von HTML und CSS erwarten.

Die Eigenschaft clear kann einen von drei verschiedenen Werten annehmen: Beide, Links oder Rechts. Dies teilt dem Browser mit, ob Sie nur Floats von links oder rechts löschen möchten oder ob Sie Floats aus beiden Richtungen löschen möchten. Sehen Sie, wie einfach wir das zuvor erwähnte Problem beheben können, indem Sie die Eigenschaft clear hinzufügen:

<style type="text/css">
.container {
    width: 300px;
    background-color: Gainsboro;
    padding: 10px;
    text-align: justify;
}

.image {
    float: left;
    margin: 0 10px 10px 0;
}

.footer {
    background-color: Azure;
    text-align: center;
    clear: both;
}
</style>

<div class="container">
    <img src="http://www.css3-tutorial.net/images/csstutorial_logo.png" class="image">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat metus, sit amet egestas dui rutrum sed.
    <div class="footer">Footer</div>
</div>

Der Trick dabei ist, die Eigenschaft clear direkt vor dem Inhalt zu verwenden, den Sie vom Floating-Inhalt fernhalten möchten. In diesem Fall können wir es einfach auf das Fußzeilenelement anwenden, da es den gewünschten Inhalt aus dem Floating-Bereich enthält. In anderen Situationen möchten Sie möglicherweise einfach ein unsichtbares div-Element hinzufügen, um das Floating zu beenden. Dies ist der Fall im nächsten Beispiel demonstriert.

Das Problem mit dem ausgeblendeten übergeordneten Element

Ein weiteres sehr häufiges Problem bei Floats ist das Problem des minimierenden übergeordneten Elements. Betrachten Sie dieses Beispiel:

<style type="text/css">
.parent {
    background-color: Gainsboro;
}

.child {
    float: left;
    margin: 10px;
    background-color: CornflowerBlue;
    width: 50px;
    height: 50px;
    padding: 5px;
}
</style>

<div class="parent">
    <div class="child">Box</div>
    <div class="child">Box</div>
    <div class="child">Box</div>
</div>

Probieren Sie es aus und sehen Sie, ob Sie das Problem erkennen können. Das ist richtig - das übergeordnete Element ist überhaupt nicht sichtbar! Sie hätten es aufgrund der grauen Hintergrundfarbe sehen müssen, aber stattdessen sitzen die drei schwebenden Elemente so, als hätten sie kein übergeordnetes Element.

Warum? Da Floating Elements keinen Speicherplatz im übergeordneten Element reserviert und sich nur Floating Elements im übergeordneten Div befinden, wird es minimiert, als ob es leer wäre. Wenn Sie unter den drei untergeordneten Divs ein Wort einfügen, wird das übergeordnete Element zwar angezeigt, es reserviert jedoch nur Platz für dieses Wort (das einzige nicht schwebende Element), sodass nur das übergeordnete Element angezeigt wird Seien Sie so hoch wie eine einzelne Textzeile, wobei die drei Kästchen unten heraushängen.

Die Lösung? Eigentlich genau das gleiche wie oben. Wenn Sie alle Floats vor dem Ende des Containers löschen, muss der Browser bis zum Clearing-Element Speicherplatz innerhalb des Containers reservieren. Hier ist ein funktionierendes Beispiel:

<style type="text/css">
.parent {
    background-color: Gainsboro;
}

.child {
    float: left;
    margin: 10px;
    background-color: CornflowerBlue;
    width: 50px;
    height: 50px;
    padding: 5px;
}

.clear {
    clear: both;
}
</style>

<div class="parent">
    <div class="child">Box</div>
    <div class="child">Box</div>
    <div class="child">Box</div>

    <div class="clear"></div>
</div>

Beachten Sie, wie wir gerade das leere Clearing-Div am unteren Rand des übergeordneten Elements hinzugefügt haben, um dieses Problem zu beheben. Es wird einfach die CSS-Eigenschaft clear verwendet, um Floats aus beiden Richtungen zu löschen, und Sie werden diese Technik wahrscheinlich ziemlich oft anwenden, wenn Sie anfangen, mit Floating-Elementen zu arbeiten.

Zusammenfassung

Floating ist eine äußerst leistungsstarke Technik, die Sie wahrscheinlich ziemlich oft anwenden werden - es wird schnell zu einer unverzichtbaren Methode, wenn Sie detailliertere Layouts erstellen möchten. Es ist jedoch mit einem geringen Preis für zusätzliche Komplexität verbunden. Wir haben Ihnen bereits einige "außergewöhnliche" Verhaltensweisen gezeigt, denen Sie bei der Verwendung von Schwimmern begegnen werden, und es gibt noch mehr davon.

Wenn sich Ihre Webseite also merkwürdig verhält, achten Sie immer auf Positionierungen, insbesondere auf Floats. Sie sind häufig schuld, da sie es dem Browser nur erschweren, die gewünschten Informationen zu interpretieren.