Verschalteltes DIV Element und float

    Hallo Zusammen


    Ich bin gerade dabei die Übungen zu CSS aus dem html-seminar durchzuarbeiten und verstehe ein bestimmtes Verhalten nicht. Konkret bin ich bei der Übung Steuerung mit Feedback. Es geht um folgendes:



    Sobald das Child DIV für das Attribut float den Wert "left" oder "right" erhält, verhält sich das Parent DIV für mich ganz komisch.

    • Das Parent DIV hat keine Hintergrundfarbe mehr
    • Fügt man beim parent DIV "margin-bottom: 100px" ein, verschiebt es das Child DIV nach unten. Das verstehe ich nicht. Das Child Element liegt doch innerhalb. Das margin-top würde es nach unten verschieben und nicht das margin-bottom (was sich übrigens ohne diese float Eigenschaft auch so verhält)

    Ich hoffe ihr könnt mich aufklären.
    Gruss,
    arber


    //update
    schliessendes <div>-tag vergessen

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von arber ()

    Hallo


    Ich gehe mal davon aus, dass im Original auch das parent-div geschlossen wird.


    Zitat

    Das Parent DIV hat keine Hintergrundfarbe mehr


    Doch, du siehst sie nur nicht.


    Durch float wird das gefloatete Element #child aus dem Dokumentenfluss gehoben und gibt seinen Platz frei. Dadurch hat #parent keinen Inhalt mehr und seine Höhe schrumpft auf Null.


    Um solche Probleme zu vermeiden solltest du dich genauer mit dem Floaten beschäftigen, speziell mit dem Clearen. Merksatz: Kein float ohne clear.


    Siehe zum Beispiel


    http://www.andreas-kalt.de/webdesign/tutorials/float-theorie


    und


    http://www.thestyleworks.de/basics/float-rule.shtml


    Zitat

    Fügt man beim parent DIV "margin-bottom: 100px" ein, verschiebt es das Child DIV nach unten.


    Das liegt an den sogenannten Collapsing Margins. Siehe zum Beispiel


    http://www.thestyleworks.de/basics/margins.shtml


    Mit dem Suchbegriff Collapsing Margins sollte die Suchmaschine deiner Wahl noch viele zusätzliche Erklärungen finden.


    Du kannst #parent ja mal spaßeshalber ein border-bottom von 1px solid black mit auf den Weg geben und schauen, wie sich die margin-bottom dann verhalten.


    Das sind alles vorgeschriebene Regeln. Statt float sollte für das Layout heutzutage sinnvoller Flexbox verwendet werden.


    Gruss


    MrMurphy

    Hallo MrMurphy


    Danke für deine eingehende Erklärung. Ich werde die genannten Beispiele und Inhalte dazu lesen.


    Du hast mir damit schon sehr geholfen.


    Das schliessende div-Tag hatte ich beim einfügen wohl nicht mitgenommen.