Layouten mit CSS
Die clear Eigenschaft kontrolliert das Verhalten von floats. Vergleiche ein mal diese beiden Beispiele:
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
I feel like I'm floating!
</div>
Hier kommt das section-Element zwar nach dem div. Aber weil das div nach links floated, passiert folgendes: Der Text in der section fließt um das div herum, und die section umschließt das ganze. Wie bekommen wir die section nun dazu, auch tatsächlich nach dem gefloateten Element zu erscheinen?
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
I feel like I'm floating!
</div>
Mit Hilfe der clear-Eigenschaft haben wir die section nun unter das div geschoben. Der Wert left hebt das Umfließen um Elemente, die nach links gefloatet sind, auf. Das funktioniert auch für nach rechts gefloatete Elemente mit right, oder für beide Seiten mit both.
