使外部 div 包含内部 div 和表单答案

【问题标题】：Making outside div contain inner div and form使外部 div 包含内部 div 和表单
【发布时间】：2012-11-16 19:48:10
【问题描述】：

我是 CSS 新手，我正在处理一个我无法理解的问题。我有一个父 div“页脚”，其中包含一个子 div“投票”。此 div 包含一个当前包含一个图像按钮的表单。

使用“检查元素”查看时，页脚 div 的高度为 0px，只显示定义的边距。为什么是这样？如果没有定义，父 div 不应该保持内部 div 调整其大小吗？

添加文本元素时会出现这种情况（代码示例中注释掉的行），但在这种特殊情况下，我不需要添加任何文本，所以这不是一个选项。

有什么建议吗？

<html>
<head>
<style type="text/css">
#footer {
    margin: 0.2em;
}
#vote {
    float: right;
}
#voteForm {
    float: right;
    margin: 0.2em;
}
</style>
</head>
<body>

<div id="footer">
    <div id="vote">
        <form id="voteForm" name="voteForm" action="/vote.php" method="post">
        <input type="image" src="image/vote.png">
        </form>
    </div>
<!--    <h3>Hello</h3> -->
</div>

</body>
</html>

【问题讨论】：

标签： html css web-applications

【解决方案1】：

你还没有清除你的花车。

<html>
<head>
<style type="text/css">
#footer {
    margin: 0.2em;
}
#vote {
    float: right;
}
#voteForm {
    float: right;
    margin: 0.2em;
}

.clear {
   clear:both;
}
</style>
</head>
<body>

<div id="footer">
    <div id="vote">
        <form id="voteForm" name="voteForm" action="/vote.php" method="post">
        <input type="image" src="image/vote.png">
        </form>
    </div>
    <div class="clear"><!-- --></div>
<!--    <h3>Hello</h3> -->
</div>

当您浮动一个元素时，您会将其从页面的正常流程中移除，直到它被清除。所以没有明确的#footer 包含任何内容，因为#vote 和#voteForm 都在页面流之外。

【讨论】：

谢谢！这确实是个问题。