clear attribut in css

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • kurz:
    clear beendet float

    float sorgt dafür, dass block elemente nebeneinander angezeigt werden können (zb div). wenn du
    <div style="float:left;"></div>

    hast, dann wird der kontainer nach links gesetzt und alles rechts dranngehängt, biss der das darüberliegende element zu ende ist oder bis ein element hat, das clear:left beinhaltet.

    das ganze geht natürlich auch mit right;
    wenn du clear:both benutzt, ist es egal was bei float steht. es wird unterbrochen

    hoffe ich konnte dir helfen

    EDIT:
    hab hier kurz was zusammen gebastelt(sieht nicht toll aus, sollte aber reichten)

    HTML-Quellcode

    1. <b>float:left</b>
    2. <div style="border:1px solid red;float:left; width:300px;height:100px;">float:left</div>
    3. <div style="border:1px solid green;width:10px;float:left;">a</div>
    4. <div style="border:1px solid green;width:10px;float:left;">a</div>
    5. <div style="border:1px solid green;width:10px;float:left;">a</div>
    6. <div style="border:1px solid green;width:10px;float:left;">a</div>
    7. <div style="border:1px solid blue;width:100px;clear:both;">clear</div>
    8. <br><br><br><br><hr>
    9. <b>float:right</b>
    10. <div style="border:1px solid red;float:right; width:300px;height:100px;">float:right</div>
    11. <div style="border:1px solid green;width:10px;float:right;">a</div>
    12. <div style="border:1px solid green;width:10px;float:right;">a</div>
    13. <div style="border:1px solid green;width:10px;float:right;">a</div>
    14. <div style="border:1px solid green;width:10px;float:right;">a</div>
    15. <div style="border:1px solid blue;width:100px;clear:both;">clear</div>
    16. <br><br><br><br><hr>
    17. <b>beides zusammen</b>
    18. <div style="border:1px solid red;float:left; width:300px;height:100px;">float:left</div>
    19. <div style="border:1px solid red;float:right; width:300px;height:100px;">float:right</div>
    Alles anzeigen

    und warum ist bei mir in HTML NIE ein ZEILENUMBRUCH?????
  • ahhhh super, danke corema.
    damit ich also von einem Element den float-fluß unterbrechen kann, brauche ich
    dass "clear" Attribut, somit ordnet sich dann das Element welches clear beinhaltet unter den anderen.

    und wo ist der Unterschied zwischen "float:none" und ""clear:both"


    mfg
    lord-edi
  • Hi,
    clear wird in der Regel für Elemente die nach den Elemten, die "verflossen" wurden, erscheinen sollen eingesetzt. float:none setzt das Element hingegen in die normale Ordnung der Elemente.
    Bsp. Wenn du links ein float-kästchen hast, und dann ein anderes kästchen hast, mit clear, wird das clear-kästchen nach dem ersten Kästchen erscheinen. Bei float:none wird es neben dem Kästchen erscheinen, weil es das andere umfließt.

    Ich hoffe, ich habe mich einigermaßen klar ausgedrückt ^^

    Gruß
    Broken Sword