Question

我遇到了一个奇怪的CSS问题。以下是我的HTML

<div id="contact-me-content">

    <form action="" method="post">

        <label for="contact-name">Name</label>
        <input type="text" name="contact-name" id="contact-name" placeholder="Your name" />

        <input type="submit" style="float:right" name="contact-submit" id="contact-submit" value="Send" />
        <div style="clear:both"></div>

    </form>
</div>

以下是css

#contact-me-content
{
height: 0;
padding: 5px;
background: #ffffff;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}

我正在浮动提交按钮，然后尝试清除浮动，以便表单包含在父div中。因为父div具有高度：0，所以clear不起作用。但是，如果我删除高度：0它工作正常。有没有人知道这种方式还是可以给我一个解释？

由于

Answer 1

要开展工作，您应该尝试在display: inline-block;中添加#contact-me-content，然后只有您的浮动元素可以clear: both;

Answer 2

您可以使用height: 0或display: none而不是使用visibility: hidden来隐藏div。如果必须使用height: 0，则还要将overflow: hidden添加到容器中，并且将隐藏溢出的表单的任何部分。请注意，填充为其提供了一些可见性，因此您可以将其设置为0并稍后将其添加回来，或者将填充添加到表单元素中。

http://jsfiddle.net/ExplosionPIlls/BQCqJ/

如果父级的高度为0，则CSS清除不起作用：0

2 个答案: