Suche elegante Lösung für clear float

[Donaudampfschifffahrtsgesellschaftkapitänskajütentürschnalle]

Hey,

Nachdem ich einige Elemente eine float - Eigenschaft hinzugefügt habe,
würde ich diese gerne wieder "aufheben".

Gibt es hierfür eine elegantere Lösung als

<div id="clear_float"></div>

bzw.

  
  
#clear_float {  
clear: both  
}

?

[ChrisB]

Hi,

Nachdem ich einige Elemente eine float - Eigenschaft hinzugefügt habe,
würde ich diese gerne wieder "aufheben".

Gibt es hierfür eine elegantere Lösung als […]

Ja, einige.
Wirklich selber recherchiert hast du noch nicht, oder?

MfG ChrisB

[Donaudampfschifffahrtsgesellschaftkapitänskajütentürschnalle]

Hi,

Nachdem ich einige Elemente eine float - Eigenschaft hinzugefügt habe,
würde ich diese gerne wieder "aufheben".

Gibt es hierfür eine elegantere Lösung als […]

Ja, einige.
Wirklich selber recherchiert hast du noch nicht, oder?

MfG ChrisB

Ok, ich paraphrasiere meine Frage, um auch den Letzten hier im Forum zufrieden zu stellen:

Mir ist schon klar, dass es mehrere Methoden dazu gibt.

Lies mein Posting nochmal.
Du wirst feststellen, dass ich nicht nach anderen Lösungen, sondern nach ELEGANTEREN Lösungen gefragt habe.
Ist z.B. das Pseudoelement :after "erstrebenswerter"? Diese Version hebt z.B. [wieder einmal] den IE komplett aus den Angeln,
der einen eigenen Workaround benötigt.

Dieses Forum verschreibt sich letztlich der syntaktisch wie semantisch korrekten HTML-Auszeichnung...

Daher: wie [wenig] "akzeptabel" ist ein <div> Element zu diesem Zwecke eurer Meinung nach, bzw. wie löst IHR dieses "Problem"?

MfG,
Donaudampfschifffahrtsgesellschaftkapitänskajütentürschnalle

[ChrisB]

Hi,

Mir ist schon klar, dass es mehrere Methoden dazu gibt.

Gut. Und zu welcher eigenen Bewertung dieser bist du jeweils gekommen?

Lies mein Posting nochmal.
Du wirst feststellen, dass ich nicht nach anderen Lösungen, sondern nach ELEGANTEREN Lösungen gefragt habe.

Und was ist „Eleganz“ in deinen Augen in diesem Kontext?

Ist z.B. das Pseudoelement :after "erstrebenswerter"? Diese Version hebt z.B. [wieder einmal] den IE komplett aus den Angeln, der einen eigenen Workaround benötigt.

Höchstens uralte IEs.

Daher: wie [wenig] "akzeptabel" ist ein <div> Element zu diesem Zwecke eurer Meinung nach, bzw. wie löst IHR dieses "Problem"?

Das hängt immer von den jeweiligen Bedingungen ab. Eine pauschal „beste“ Lösung sehe ich da nicht - und auch keine Notwendigkeit für eine solche.

MfG ChrisB

[Donaudampfschifffahrtsgesellschaftkapitänskajütentürschnalle]

Ist z.B. das Pseudoelement :after "erstrebenswerter"? Diese Version hebt z.B. [wieder einmal] den IE komplett aus den Angeln, der einen eigenen Workaround benötigt.

Höchstens uralte IEs.

Zumindest laut http://www.positioniseverything.net/easyclearing.html dürfte auch der IE7 so seine Problemchen mit dem :after Pseudoelement haben.
Dieser ist WAHRSCHEINLICH nicht GANZ der allerbeste Browser (ich enthalte mich BEWUSST jeglichen Kommentares hierzu...) aber sicher nicht uralt.

Daher: wie [wenig] "akzeptabel" ist ein <div> Element zu diesem Zwecke eurer Meinung nach, bzw. wie löst IHR dieses "Problem"?

Das hängt immer von den jeweiligen Bedingungen ab. Eine pauschal „beste“ Lösung sehe ich da nicht - und auch keine Notwendigkeit für eine solche.

Es widerstrebt mir irgendwie ein an und für sich inhaltleeres <div> Element zu bloßen Formatierungszwecken im HTML-Code einzubauen...

---

Da dieses "Problem" natürlich immer wieder auftritt und ich mich des Öfteren bereits gefragt habe, inwieweit solch ein <div> Element vom Standpunkt der korrekten Syntax überhaupt vertretbar ist, hab ich mich letztlich auch entschlossen, hier im Forum zu posten und mich mit anderen darüber auszutauschen.

... trotzdem danke erstmals für DEINE Meinung, mehr wollte ich auch gar nicht wissen! :)

Was meinen andere dazu?

MfG,
Donaudampfschifffahrtsgesellschaftkapitänskajütentürschnalle

[Malcolm Beck´s]

مرحبا

Da dieses "Problem" natürlich immer wieder auftritt und ich mich des Öfteren bereits gefragt habe, inwieweit solch ein <div> Element vom Standpunkt der korrekten Syntax überhaupt vertretbar ist

Es muss ja nicht zwingend ein div-Element sein. Ein <br style="clear:both;"/> tut es auch. Oder ein span.

Ich für meinen teil habe mich damit abgefunden, zu tun und zu lassen, was immer ich will, wenn ich Webseiten erstelle.

mfg

[Daniel.S]

Es muss ja nicht zwingend ein div-Element sein. Ein <br style="clear:both;"/> tut es auch. Oder ein span.

span nur, wenn du es zu einem Blockelement machst.

[molily]

Ist z.B. das Pseudoelement :after "erstrebenswerter"?

Ja.

Diese Version hebt z.B. [wieder einmal] den IE komplett aus den Angeln,
der einen eigenen Workaround benötigt.

Erst einmal betrifft das nur IE < 8.

Der Workaround besteht im Anschalten von hasLayout. Das ist hinreichend erforscht. Seit 2005.

Siehe auch Grundlagen für Spaltenlayout (2006).

Dieses Forum verschreibt sich letztlich der syntaktisch wie semantisch korrekten HTML-Auszeichnung...

Korrekt, Fragen die Darstellung betreffend sollen im CSS gelöst werden. Das HTML möglichst wenig damit zu tun haben, es muss nur grobe Angriffspunkte bieten. Ein gut ausgezeichnetes und gut strukturiertes HTML5-Dokument bietet dazu meist genug Elemente.

Daher: wie [wenig] "akzeptabel" ist ein <div> Element zu diesem Zwecke eurer Meinung nach

Es ist bereits seit 2004 inakzeptabel, floats mit Markup zu clearen.

bzw. wie löst IHR dieses "Problem"?

http://nicolasgallagher.com/micro-clearfix-hack/

Mathias

[molily]

Siehe auch http://www.highresolution.info/weblog/entry/von_fliegenden_kuehen_und_anderen_merkwuerdigkeiten/

Mathias

[Jeena Paradies]

Hallo,

bzw. wie löst IHR dieses "Problem"?
http://nicolasgallagher.com/micro-clearfix-hack/

Oh es ist schon sehr lange her dass ich hier was neues gelernt habe, danke für den Link ;-)

Jeena

[T-Rex]

Ja gibt es

</html>

Gruß
heute mal nicht am helfen :P
T-Rex

[dave]

Hi,

inhaltslose Elemente sind immer doof.

Es gibt aber leider keine (mir bekannte) "richtige, beste" Lösung.
Eine die meistens recht gut funktioniert ist als clearfix bekannt:

.clearfix:before, .clearfix:after { content: ""; display: table; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

Funktioniert auf jeden Fall ab IE7+, ich glaube sogar IE6 (aber wen interessiert der noch …).

Eine andere Möglichkeit ist es dem Element dass die floats einschließen soll für overflow einen anderen Wert als visible zu geben (natürlich mit allen daraus folgenden Konsequenzen).

~dave

[Cheatah]

Hi,

Gibt es hierfür eine elegantere Lösung als
<div id="clear_float"></div>

ja, die bereits vorhandene Struktur zu nutzen.

Cheatah