html - 父 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: 就在您的#signupForm 中。这会导致 div 脱离文档的 float 。

放一个

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

与

.clear {
    clear: both;
}

在注册表单之后。