Css 仅包含浮动的父元素的高度将折叠为零。如何修复它？

使用浮动的一个更令人困惑的问题是它们如何影响包含它们的元素（它们的“父”元素）。如果这个父元素只包含浮动元素，那么它的高度实际上会塌陷为零。如果父对象不包含任何视觉上明显的背景，这并不总是显而易见的，但要注意这一点很重要

我在父元素和2个子浮动元素中有背景图像。如上所述，只要它只有浮动元素，它的（父元素）高度就会塌陷为零。我怎样才能修好它？我不想给父标签添加高度或任何内容。我希望父元素的高度根据浮动元素的内容自动增加？我怎样才能做到呢

添加

#parent{
    overflow:auto;
}

---

或者使用可用的技术清除浮动

您有不同的方法来管理浮动元素并将其包含在流中。父元素或旁侧元素需要以某种方式触发其布局，它计算浮动元素使用的房间/空间。 以下是一些可以应用于代码段的方法：

    /* different ways to play with layout */
    .outerdiv:before { /* add classname in document to be abble to relat it to css rules applied , demo purpose */
        content:attr(class);
        position:absolute;
        margin-top:-1.2em;
        background:yellow;
    }
    .outerdiv { /* demo purpose , we stack them */
        clear:both;
        margin:1em auto;
    }
/* here we go ========================================= */
    .clearafter:after {
        content:'';
        display:block;
        clear:both;
    }
    .displayib {display:inline-block;}
    .displaytb {display:table;}
    .overflowh {overflow:hidden;}
    .overflowa {overflow:auto;}
    .overflowv {overflow:visible;} /* defaut, doesn't trigger anything */
    .float {float:left;}

你可以看到每一种可能性，也可以看到它所带来的结果

---

为了进一步理解，您可以阅读以下内容：

一个JSFIDLE对我们很有帮助。你能解释一下你的意思吗？在谷歌搜索clearfix有大量的参考资料哇！成功了。你能解释一下它是如何做到的吗？这不仅不再是清算浮动的公认解决方案（请参阅），而且这个答案肯定会从一些解释中受益。