父div高度小于预期

Question

我在网页设计上练习，我注意到父div的高度比孩子div小。

这是我的css代码：

html,body{
    background-color: #ecf0f1 ;
    height: 100%;
    padding:0px;
    margin:0px;
}


#homeDisplay{
    width: 850px;
    height: auto;
    border: 2px solid #7f8c8d;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left:auto;
    margin-right:auto;
    padding:8px;
}

#signupForm{
 text-align: right;
    float:right;
    width: auto;
    height: auto;
    border: 2px solid #7f8c8d;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 8px;
}

Answer 1

您正在使用float:right作为内部内容，因此会从文档的正常流程中删除它，并且父级无法根据内容的大小调整其大小。修复：将overflow:auto CSS属性设置为容器。

Answer 2

这是因为浮动：在你的#signupForm中。这会导致div从文档的浮动中取出。

放一个

<div class="clear"></div>

与

.clear {
    clear: both;
}

注册表后

。