Blog

CSS: Clearfix-Hack

Werden Elemente verwendet, die die float-Eigenschaft besitzen, so hat man oft das Problem, dass diese Elemente, aus anderen Elementen ausbrechen. Dies liegt daran, dass das äußere Element nicht mehr weiß, wie hoch es sein darf, weil das Innere den Fluss unterbricht.

Der Ausbruch

Damit die Problemstellung deutlicher wird, schauen wir uns ein Beispiel an. Wir haben ein Äußeres und ein inneres div-Element. Der Innere besitzt eine float-Eigenschaft.


<div>
	<p>Äußere Box</p>
	<div style="float: left">
		<p>Innere Box</p>
	</div>
</div>

Äußere Box

Innere Box

Hier sieht man deutlich, dass die innere Box ausbricht, obwohl sie sich in der äußeren befindet.

Der Hack

Damit die innere Box nicht mehr ausbricht, muss man der äußeren Box sagen, dass sie die innere Box umschließen soll. Das geschieht mit dem nachfolgenden CSS-Code, dem Clearfix:


.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1; /* Für IE 6/7 */
}

Das Ergebnis

Nun können wir den Clearfix in unser HTML wie folgt einbauen:


<div class="clearfix">
	<p>Äußere Box</p>
	<div style="float: left">
		<p>Innere Box</p>
	</div>
</div>

Äußere Box

Innere Box

Quelle


Dieser Thread wurde geschlossen.

Populäre Tags

CSS Firefox MODX JavaScript