Question

我有两个div（一个在另一个内部）并且当我将一个内部浮动到“left”时遇到了一些问题。问题是外部div不会扩展其高度以适应内部div内部的文本。由于这可能非常令人困惑，我将尝试用一些代码来解释它。

HTML：

<body>
    <div id="div1">
        Inner Div:
        <div id="div2">Testing long content.</div>
    </div>
</body>

CSS：

#div2 {
    float: left;
    width: 10px;
}

我更希望在测试时这实际上显示了我的问题，因为我没有机会测试这个。我的真实代码有更多的属性，如果需要，我会提出这些属性。

Answer 1

您需要使用clear-fix。在浮动div之后插入以下内容，并在包含div中。

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

并添加以下样式：

.clear { clear:both; }

示例：

<div class="container">
  <div class="floatedDiv">Hello World</div>
  <div class="clear"></div>
</div>

Answer 2

如果您不想在html中添加额外的标记或向外部div添加宽度，可以使用：

#div1 {
    overflow:hidden;   /* clears float for most browsers */
    zoom:1;            /* clears float for IE6           */
    }

Answer 3

也许方便注意，还有来自positioniseverything的众所周知的clearfix代码专门针对此问题编写，并且在任何情况下都可能是最强大且最容易应用的。 CSS看起来如下：

<style>
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.clearfix { display: inline-block; margin: 0 0 8px 0; }
/* Hides from IE-mac \*/
* html div.clearfix { height: 1%; }
div.clearfix { display: block; }
/* End hide from IE-mac */
</style>

为了在您的情况下使用它，您将执行以下操作：

<body>
<div id="div1" class="clearfix" >Inner Div:
<div id="div2">Testing long content.</div>
</div>
</body>

Answer 4

（今天第三次:-)）给外部div溢出：隐藏;
和宽度。

Answer 5

虽然上述解决方案应该有效，但我认为值得指出的是，我还没有看到过一个神奇的技巧（在这个帖子中）。

向左漂浮＃div1。当你浮动父元素时，它会自动清除子元素 - 非常有用，真的。您可以构建浮动堆栈的整个布局，然后在最后有一个最终清除，并且它相当可靠。

Float创建重叠的Div

5 个答案: