Clearfix (Float auflösen)

[Azra]

Hier ein neues clearfix zum Auflösen von Floats.

Code: Alles auswählen

.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix{ zoom: 1; } /* IE6 */
*:first-child+html .clearfix{ zoom: 1; } /* IE7 */


Die üblichen Methoden bestehen darin, ein zusätzliches <div> oder <br> nach den float-Elementen zu platzieren um über eine Klasse mit dem Attribut clear (both) das float aufzulösen.

Durch den oben stehenden Code kann durch die Vergabe der Klasse clearfix an das Elternelement float aufgelöst werden. HTML-Beispiel:

Code: Alles auswählen

<div id="wrapper" class="clearfix">
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>