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

  • 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!