Müssen floats immer gecleared werden?

**freddymc** · 13.09.2008 17:28

Hallo allerseits!

"Müssen floats immer gecleared werden?" Die Frage würde ich eigentlich immer bejahen.

Jedoch stoße ich im Netz immer wieder auf Beispiele, in denen munter gefloated wird ohne ein clearendes Element zu verwenden.

Beispiel: Styling von forms mittels definition lists & css.

Dort wird folgendes geposted:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Example 2 - Styling forms with definition lists</title>
		
		<style type="text/css">
			form{
				width:500px;
			}
			form dt{
				float:left;
				width:150px;
			}
			form dd{
   				margin-bottom:6px;
			}
		</style>
	</head>
	<body>
		<p>This is an example form and is related to the post <a rel="start" href="http://www.aaronwitherow.co.uk/blog/comments/styling_forms_with_definition_lists/">Styling Forms with Definition Lists</a></p>

		<form method="post" action="#">
			<fieldset>
				<dl>
					<dt><label for="firstname">First Name:</label></dt>
					<dd><input type="text" id="firstname" /></dd>
		
					<dt><label for="lastname">Last Name:</label></dt>
					<dd><input type="text" id="lastname" /></dd>
		
					<dt><label for="email">Email Address:</label></dt>
					<dd><input type="text" id="email" /></dd>
		
					<dt><label for="comments">Comments:</label></dt>
					<dd><textarea rows="5" cols="30" id="comments"></textarea></dd>
				</dl>
				<input type="submit" value="Submit" />
			</fieldset>
		</form>
	</body>

</html>

Nirgendwo ein "clear". Eigentlich müsste doch soetwas geschrieben, werden oder?

HTML-Code:

<dd><input type="text" id="lastname" /></dd><br style="clear: left;" />

Wobei ich nicht weiß ob der break dort überhaupt stehen darf.

Experten-Meinungen?

Grüße,
Fred

**steffenk** · 13.09.2008 18:40

Hi,

ich hab mir das so gemerkt:
"Wer float sagt muss auch clear sagen"

Allerdings muss das syntaktisch richtig sein.
Da dort innerhalb der dl gefloatet wird, muss nach der dl gecleart werden, Dein br ist nicht zulässig.

Wenn man das nicht macht läuft man Gefahr, das das Design ins stolpern gerät, spätestens wenn der IE komische Sachen macht weiss man Bescheid.

Reines clear:both findet man heute seltener, es hat sich die clearfix-Methode durchgesetzt

**freddymc** · 13.09.2008 19:36

Hi Steffen,

jo clearfix nutze ich auch recht häufig, ist meistens recht bequem.
Aber im obigen Fall doch eher ungünstig, oder?

Davon abgesehen kann die Lösung so aussehen:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Example form marked up using a definition list</title>
<style type="text/css">
form {
	width:50%;
}
form dt {
   clear:both;
   width:33%;
   float:left;
   text-align:right;
}

form dd {
   float:left;
   width:66%;
   margin:0 0 0.5em 0.25em;
}
</style>
</head>
<body>
<form action="#">
<dl>

<dt>Name:</dt>
<dd><input type="text" name="name" size="40" /></dd>
<dt>Email:</dt>
<dd><input type="text" name="email" size="40" /></dd>
<dt>Website:</dt>
<dd><input type="text" name="website" size="40" /></dd>
</dl>
</form>
</body>
</html>

Es kann so einfach sein

Regards,
Fred

**steffenk** · 13.09.2008 20:05

Hi,

so ganz korrekt ist das aber nicht. Klar, dt cleart, aber dd mit float kommt nach dt, also wird am Schluss nicht mehr gecleart.

**Sand*mann** · 13.09.2008 20:14

Die Definitionsliste, also das <dl>-Tag, mit ner clearfix Klasse versorgen, sollte doch passen, oder?

Code:

<dl class="clearfix">

**steffenk** · 13.09.2008 21:54

oder mit overflow:auto

ja wirklich, ich hab meinen Augen nicht getraut, aber lest selber:
http://www.sitepoint.com/blogs/2005/...ing-of-floats/

**phpBuddy** · 13.09.2008 22:02

Zitat von steffenk

oder mit overflow:auto

ja wirklich, ich hab meinen Augen nicht getraut, aber lest selber:
http://www.sitepoint.com/blogs/2005/...ing-of-floats/

Krass! Mehr fällt mir dazu gerade nicht ein.

**zulujaner** · 13.09.2008 23:34

Zitat von steffenk

Reines clear:both findet man heute seltener, es hat sich die clearfix-Methode durchgesetzt

Wußte doch das ich das irgendwo schon in deutsch gesehen habe

clearfix in deutsch

Wenn auch obige Methode - Beitrag 6 nicht zu verachten bzw. einfacher ist.

Grüße zulujaner

**freddymc** · 14.09.2008 12:10

Hi,

Zitat von steffenk

Da dort innerhalb der dl gefloatet wird, muss nach der dl gecleart werden

Wirklich? Ich denke eher, dass wenn innerhalb eines Elements, Elemente gefloated werden, muss auch innerhalb des Elternelements (hier dl) gecleared werden.

Nur clearfix oder overflow: auto; reicht das?
Ich nutze diese Methoden wenn ein Element zwei floatende Elemente oder ein floatendes Element und ein nicht floatendes Element umschließt.
Im Beispiel oben, sind das jedoch viele Floats, die alle nacheinander kommen. Es müsste nach jedem Defintionspaar (dt & dd) gecleared werden, da diese Paare untereinander stehen sollen.
Der Punkt von Steffen (das letzte dt wird nicht gecleared) ist einleuchtend - da habe ich nicht dran gedacht.

Folglich muss man dt float: left; clear: both; geben und dl muss die clearfix Klasse/overflow-Eigenschaft bekommen.

Oder?

Regards,
Fred

**Boris** · 14.09.2008 19:02

Zitat von steffenk

oder mit overflow:auto

Funktioniert aber nicht für jeden Fall.

Am besten ist meiner Meinung nach die CSS Clear Methode über den :after Selektor und für die IEs (über ein CC eingebundenes CSS) über height: 1%, bzw. min-height: 1% (IE7) ... hasLayout lässt grüßen.

**steffenk** · 14.09.2008 19:41

Wo denn nicht? Im Artikel wurde erwähnt, das Netscape 4 Pronleme macht (was man aber wirklich vernachlässigen kann)
Wenn selbst IE4 damit klar kommt ...

**Boris** · 14.09.2008 22:12

Ich hatte es in einigen Projekten mal versucht, aber Probleme damit. Seit dem hab ich es nie wieder benutzt, da ich mit der Methode oben gut arbeiten kann.

**steffenk** · 15.09.2008 10:22

In diesem Zusammenhang möchte ich noch einen Buchtipp abgeben, allerdings in englisch:
http://www.amazon.com/Transcending-C...1421390&sr=8-1

gibts wohl auch in deutsch:
http://www.amazon.de/Transcending-CS...1479619&sr=8-1

zur Startseite vom TP

Thema: Müssen floats immer gecleared werden?

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Müssen floats immer gecleared werden?

Ähnliche Themen

Müssen Pagerank Optimierungen immer auf der Startseite sein ?

wer sagt den, daß firmenseiten immer seriös daherkommen müssen...

wo müssen die plugins hin kopiert werden ?

Formularfelder müssen ausgefüllt werden

Webseiten müssen behindertengerecht werden

Aktive Benutzer

Aktive Benutzer