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

    Einmal editiert, zuletzt von arber (25. Januar 2017 um 16:11)

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