Hierzu wurde gerne – und man sieht es noch sehr häufig – ein leeres DIV mit der Klasse clear eingefügt. Dies führt nun dazu, dass man im Zweifelsfall eine Menge von diesen sinnlosen und leeren Containern hat. Das muss nicht sein, denn um mal Guido Mühlwitz zu zitieren:

und auch Torben Leuschner hat da seine eigene Art das Problem zu lösen:

Also, hier die beiden Lösungsansätze, die beide wunderbar funktionieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clearing Floats</title>
<style type="text/css">
.float-left {float:left; width:300px;}
.float-right {float:right; width:300px;}
.container {overflow:auto;}

/* Clearfix
----------------------------------------------- */
.clearfix:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.clearfix {zoom:1;} /* For IE 6/7 (trigger hasLayout) */
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
</style>
</head>
<body>
<div>
<p>Overflow-Methode</p>
<div class="container">
<div class="float-left">
<p>Der hier ist links gefloatet.</p>
</div>
<div class="float-right">
<p>Der hier ist rechts gefloatet</p>
</div>
</div>
<p>Und hier geht es ohne Floating weiter</p>
</div>

<div>
<p>Hier die Clearfix-Methode</p>
<div class="clearfix">
<div class="float-left">
<p>Der hier ist links gefloatet.</p>
</div>
<div class="float-right">
<p>Der hier ist rechts gefloatet</p>
</div>
</div>
<p>Und hier geht es ohne Floating weiter</p>
</div>
</body>
</html>

Viel Spaß :-)

Artikel / Seite weiterempfehlen

3 Meinungen zu “CSS-Clearfix: Floats anständig clearen

  1. Hi! Vielen Dank für diesen Artikel. Ich stand vor kurzem wieder vor dem gleichen Problem. Erste Idee: Leeren DIV-Container einbauen. Gesagt, getan. Allerdings habe ich jetzt diesen Container wieder entfernt und durch die Lösung von Torben ersetzt :-)

  2. Also ich weis nicht es ist doch nur der Befehl
    clear:both;

    das doch alles. Dieser in den übergeordneten Container rein und gut.
    Das .container {overflow:auto;} ist mir nun nicht bekannt. Doch overflow hat doch an sich eine andere Funktion, die hier nur missbraucht wird oder?
    gruß
    norbert

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>