Peter Nack: Sinnlose Mengen an <div class="clearfix"></div>

Hallo,

ich habe mal eine Frage bezgl. des korrekten Markups fuer das Clearen von gefloateten Containern.

Bisher habe ich das immer in etwa wie folgt geloest:

.clearfix {  
  clear:both;  
}  
ol {  
  float:left;  
} 
<ol>  
  <li> Lorem </li>  
  <li> Ipsum </li>  
</ol>  
<div class="clearfix></div>

Allerdings wimmelt es in meiner Seite mitterweile geradezu von diesen Clearfixes. Daher schaue ich gerade, wie ich dieses unschoene Problem am besten loesen kann.

Dabei bin ich auf folgendes gestoszen:
Example 1
Example 2

Wobei letzteres den Anschein erweckt, als liefe es auch auf dem IE6.

Da http://browsershots.org/ ihren Dienst (derzeit?) deaktiviert haben, wollte ich mal in die Runde fragen, ob ich mich mit dem zweiten Beispiel in die richtige Richtung bewegen wuerde oder nicht.

Vielen Dank schonmal.

MfG
Peter

  1. Dabei bin ich auf folgendes gestoszen:
    Example 1
    Example 2

    Wobei letzteres den Anschein erweckt, als liefe es auch auf dem IE6.

    ersteres sollte auf dem IE6 auch funktionieren da "es" der IE6 ohnehin falsch macht

    Ein Kritikpunkt:

    content:"."; ist etwas unklug - ich würde hier content: '\00A0'; empfehlen, Firefox 3 spinnt ab und an und zeigt den Punkt trotzdem an, ein geschütztes Leerzeichen ist da weniger problematisch.

    1. Hi suit,

      besten Dank fuer deine Antwort.

      ersteres sollte auf dem IE6 auch funktionieren da "es" der IE6 ohnehin falsch macht

      Ich habe meine Seite nun dementsprechend angepasst. Das Markup sieht jetzt ein wenig schoener aus - wie es sich damit in den einzelnen Browsern verhalten wird, muss ich bei Zeiten noch ausfuehrlich testen.

      Ein Kritikpunkt:
      content:"."; ist etwas unklug - ich würde hier content: '\00A0'; empfehlen, Firefox 3 spinnt ab und an und zeigt den Punkt trotzdem an, ein geschütztes Leerzeichen ist da weniger problematisch.

      Danke fuer den Hinweis.

      MfG
      Peter