Html 如何安装div'；它的高度可以包裹漂浮的孩子

我有一个小提琴包着两个孩子，一个向左飘，另一个向右飘。我想在子对象周围放置边框和背景，但div的高度为0，因为它无法调整大小以适应子对象

下面是一个it实际应用的示例：

我希望红色背景一直向下。我试过height:auto，但没用

任何和所有的帮助都将不胜感激，谢谢

---

另外，如果可能的话，我不想使用任何javascript。

添加

溢出：隐藏到#换行。这是一个
清除修复程序
。以下是一些关于它的文档：

LE：根据浏览器的兼容性，您也可以通过多种方式实现这一点：

添加溢出：隐藏到父容器
#wrap{overflow:hidden；}

使用伪元素添加
清除：两个

#换行：在{清除：两者；内容：；；显示：表格；}之后

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

我建议
not
在获得额外的HTML标记时使用第三个标记。
尝试将
overflow:hidden
添加到
#wrap
div
这是使用浮动时的常见问题。有几种常见的解决方案，我根据个人喜好订购（最佳方法优先）：

使用：：after CSS伪元素。这被称为“clearfix”，适用于IE8及以上版本。如果您需要与早期版本的IE兼容


将两个浮点数添加到具有CSS属性
溢出：自动
或
溢出：隐藏
的容器中。但是，这种方法可能会导致问题（例如，当工具提示与父元素的边缘重叠时，将出现滚动条）


在关闭外部div之前，只需再添加一个样式为“样式清晰：两个”的div，即此处的“包装”

--示例代码--


左边有一些内容

右边有一些内容

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


只需将其添加到CSS和任何浮动元素中，将“cf”类添加到任何具有浮动子元素的元素的包装中。
并且不要添加额外的空白、非语义元素，这些元素只会使事情变得混乱。我实际上尝试了no.1，但没有效果（我在WP工作，所以我可能把它放在模板中稍微错误的位置），但第2号很有用，谢谢！谢谢你的透彻解释。每次我遇到这个问题，我总是使用#1，尽管它很难看，但我没有看到不同的解决方案。我遇到了一个案例，增加一个额外的div不是一个选项，做了一点额外的挖掘，找到了你的答案。现在我带着武器，很危险！lol.再次感谢。+1为您提供了多种解决方案；每种解决方案都有可用的小提琴和清晰的解释。+1 for->style=“overflow:auto”（我对web开发非常陌生）^^谢谢！）
.parentelement::after {
    content: "";
    display: table;
    clear: both;
}

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

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

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

<div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></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>

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

.cf:after {
    clear:both;
}

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