Warum ist die Höhe meiner Div Null?

Habe ich Folgendes in meiner CSS. Alle Ränder/Polster/Grenzen sind Global auf 0 zurückgesetzt.

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

Wenn ich jetzt Schreibe mein HTML-Code als

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

die Seite richtig gerendert wurde. Allerdings, wenn ich überprüfen Sie die Elemente, die div#wrapper ist gezeigt als 0px hoch. Ich hätte erwartet, dass es zu erweitern bis zum Ende des div.content und div.lbar... Warum passiert das?

Wieder, die Seite macht gut. Dieses Verhalten nur stutzig macht mich.

InformationsquelleAutor der Frage | 2011-03-20

  1. 188

    Inhalte, die schwimmt, hat keinen Einfluss auf die Höhe des Containers. Das element enthält keinen Inhalt, der nicht schwimmend (also nichts Stoppt die Höhe des Containers wird 0, wenn es leer waren).

    Einstellung overflow: hidden auf der container zu vermeiden, dass durch die Errichtung eines neuen block formatting context. Sehen Methoden für die Schwimmer für andere Techniken und mit Schwimmern für eine Erklärung, warum CSS-wurde auf diese Weise entwickelt.

    InformationsquelleAutor der Antwort Quentin

  2. 45

    Normalerweise floats nicht gezählt, die in das layout Ihrer Eltern.

    Um das zu verhindern, fügen Sie overflow: hidden zu den Eltern.

    InformationsquelleAutor der Antwort SLaks

  3. 3

    Ich bin nicht sicher, ob dies eine richtige Weg, aber ich löste es durch hinzufügen display: inline-block; zu den wrapper-div.

    #wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}

    InformationsquelleAutor der Antwort mbmert

Schreibe einen Kommentar