clearfix

.clearfix

Die CSS-Klasse clearfix hebt den float innerer Elemente auf

Floatende Elemente werden aus dem Textfluss genommen. Das umgebene Element berechnet die Höhe des Inhalts nicht mehr. Dies erkennt man daran, dass die Border oder der Hintergrund des Containers das floatende Element nicht mehr umschließt. Um Floats zu clearen eignet sich overflow: hidden; des Containers, clear: both; unter dem floatenden Element oder die CSS-Klasse clearfix im Container. Die Verwendung von overflow: hidden; ist unprofessionell, da hierdurch die Updatefähigkeit stark beeinflusst wird.

Klassische Methode

<style type="text/css">
.clearfix {display: block;}

.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    line-height: 0;
    content: ".";
}

/* IE7 */
*+ html .clearfix {display: inline-block;}

/* IE6 */
* html .clearfix {
    display: inline-block;
    height: 1%;
}
</style>

Moderne Methode

<style type="text/css">
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {clear: both;}

.clearfix {*zoom: 1; /* IE6 + IE7 */}
</style>
Impressum