Nachdem immer mal wieder CSS gepostet wird, in dem overflow: hidden; als vermeintlich einfache Methode zum Einschließen von Floats eingesetzt wird, andererseits aber auch immer auf die Gefahren dieser Methode hingewiesen wird (da sie älteren Geckos mitunter massive Probleme bereitet), habe ich mal ein kleines Testcase erstellt.
Es ist der denkbar simpelste Fall: Der Float ist höher als sein umgebendes Element und hängt heraus (wie auch in FAQ Punkt 2 zu sehen), wenn keine "Gegenmaßnahmen" getroffen werden. Der Rest ist selbsterklärend
Schaut man sich das Textcase jetzt mit einem Gecko-Browser an, der älter ist als Firefox 1.0 (dazu gehören also auch Firebird, Phoenix und Netscape 7), offenbaren sich die verheerenden Folgen der letzten Methode: overflow: hidden; bringt den Floathoalder
nicht zum Einschließen des Floats, und dieser hängt auch noch nicht einmal heraus, da der Wert "hidden" bewirkt, dass er abgeschnitten wird und dadurch nahezu komplett verschwindet. Aber immerhin wird unterhalb des Floatholders der Platz freigehalten, den der Float einnehmen würde, wenn er denn sichtbar wäre
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
div {
padding: 10px;
color: black;
}
.floatholder {
width: 700px;
background: silver;
margin-bottom: 20px;
}
.floatholder div {
width: 200px;
float: left;
background: red;
}
.float {
float: left;
}
.hidden {
overflow: hidden;
}
hr {
clear: left;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="floatholder">
<div>
Float<br />
Float<br />
Float<br />
Float
</div>
Floatholder
</div>
<hr />
<div class="floatholder float">
<div>
Float<br />
Float<br />
Float<br />
Float
</div>
Floatholder
</div>
<hr />
<div class="floatholder hidden">
<div>
Float<br />
Float<br />
Float<br />
Float
</div>
Floatholder
</div>
<hr />
</body>
</html>