Question

我有一个div缠着两个孩子，一个漂浮在左边，另一个漂浮在右边。我想在孩子周围放置一个边框和背景，但是div的高度为0，因为它不会调整大小以适合孩子。

以下是其中的一个示例： http://jsfiddle.net/VVZ7j/17/

我希望红色背景一直向下。我试过身高：自动，但那没用。

感谢所有和所有帮助。

P.S。如果可能的话，我不想使用任何javascript。

Answer 1

使用浮动时这是一个常见问题。有几种常见的解决方案，我根据个人喜好订购（最佳方法优先）：

使用:: after CSS伪元素。这被称为'clearfix'，适用于IE8及以上版本。如果您需要与早期版本的IE兼容，this answer should help。 Example
```
.parentelement::after {
    content: "";
    display: table;
    clear: both;
}
```
将两个浮点数添加到具有CSS属性overflow: auto或overflow: hidden的容器中。但是，这种方法可能会导致问题（例如，当工具提示与父元素的边缘重叠时，将出现滚动条）。 Example
```
<div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>
```

为父元素添加设置高度。 Example

<div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

使父元素成为浮点数。 Example

<div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

使用clear: both在浮点数后添加div。 Example

<div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>

Answer 2

将overflow: hidden;添加到#wrap。这是clear fix。这里有一些关于它的文档：http://positioniseverything.net/easyclearing.html

LE：根据浏览器的兼容性，还有多种方法可以实现这一目标：

添加溢出：隐藏到父容器。

#wrap { overflow: hidden; }

使用伪元素添加clear: both。

#wrap:after { clear: both; content: ""; display: table;}

最常用的tehnique是添加额外元素作为父容器的最后一个元素。

<div style="clear:both"></div>

我鼓励not使用第三个，因为你得到额外的HTML标记。

Answer 3

尝试将overflow: hidden添加到#wrap div。

Answer 4

我开始使用Nicolas Gallagher的“micro-clearfix”解决方案。

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

只需将它添加到CSS和任何浮动元素中，将“cf”类添加到任何已浮动子元素的元素的包装中。

Answer 5

在关闭外部div之前再添加一个样式清除：两者的div，即在这里“换行”

- 示例代码 -

<div id="wrap">
    <div id="left">
        <p>some content at left</p>
    </div>
    <div id="right">
        <p>some content at right</p>
    </div>
    <div style="clear:both"></div>
</div>

如何适应div的高度来包裹浮动的孩子

5 个答案: