Clearing floats

Um zu erreichen, dass ein float innerhalb eines Containers von diesem eingeschlossen wird, gibt es mehrere Methoden. Für mich etwas unverständlich wird das Thema zum Teil lebhaft und mit nahezu missionarischem Eifer diskutiert. Ich möchte die mir bekannten CSS-Techniken hier einmal kurz vorstellen, werde das aber weitestgehend wertfrei halten. Ich habe alle Techniken schon benutzt und einen klaren Favoriten habe ich eigentlich nicht.

Markup method: Clearing floats durch zusätzliches Markup

Wie der Name schon sagt, ist das keine reine CSS-Technik. Man erzeugt zusätzlichen, für das Layout bedeutungslosen Code.

HTML


<div class="container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
	<div class="clear"></div>
</div>

CSS


div.container {

}

div.float {
	float: left;
	width: 30%;
}

div.clear {
	clear: both;
	height: 0;
}

Für Puristen ist das nichts. Der Vorteil dieser Methode liegt aber in ihrer Übersichtlichkeit. Man kann sehr leicht Fehler vermeiden oder nachvollziehen.

Aslett/PIE Method: Clearing Floats durch Generierung von Content

Die Idee: Durch die Pseudoklasse :after generiert man Inhalt, dem man ein clear:both zuweist. Man muss noch ein “wenig” basteln, um die Methode crossbrowserfähig zu bekommen. Zudem möchte man den generierten Inhalt auch nicht sehen. Der aktuelle Stand von Tony Asletts Methode sieht 2 Stylesheets vor, wobei das zweite den Internet Explorer betrifft und per conditional comment vor den anderen Browsern (inkl. MAC/IE) verborgen wird.

HTML


<div class="clearfix container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
</div>

Allgemeines CSS


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

/* for IE/Mac */
.clearfix {
	display: inline-block;
}

CSS für IE über conditional comments


.clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
}

Ich bin nach wie vor beeindruckt von der Cleverness dieser Methode.

Float (Nearly) Everything: Clearing unnötig wenn (fast) alles floated

Steve Smith von orderedlist fand 2004 heraus, dass man ein float nicht clearen muss, wenn das Elternelement ebenfalls als float definiert wurde. Eine ausführliche Beschreibung seiner Methode findet sich auf seiner Seite.

Overflow Methode

Eine attraktive Methode. Man weist dem Elternelement das Attribut overflow zu. Hierbei nutzen manche den Wert auto, andere verwenden lieber hidden.

HTML


<div class="container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
</div>

CSS mit overflow:auto


div.container {
	overflow: auto;
	width: 100%; /* gibt IE hasLayout */
}

div.float {
	float: left;
	width: 30%;
}

CSS mit overflow:hidden


div.container {
	overflow: hidden;
	width: 100%; /* gibt IE hasLayout */
}

div.float {
	float: left;
	width: 30%;
}

Kommentar schreiben