Html 一个孩子都漂浮的Div：如何使Div有足够的高度来容纳孩子？

我有一个典型的问题，我的外部div没有任何高度，因为它的子对象都是浮动的。我想知道是否有一个简单的修复方法（sans-Javascript），这样我就可以保留浮动子对象的行为，同时使外部div具有高度（这样内部div周围就有一个边框）

下面是一个提琴，概述了问题：

CSS

#outer-div
{
    border: 1px solid red;
}

div.inner
{
    float: left; 
    width: 30%;
    border: 1px solid blue;
}

HTML

<div id="outer-div">
   <div class="inner">
       <p>Here's some content</p> 
    </div>
   <div class="inner">
       <p>Here's some more content</p> 
    </div>
       <div class="inner">
       <p>Here's even more content</p> 
    </div>        
</div>

这里有一些内容

这里有更多内容

这里还有更多内容

父Div高度不会调整为浮动的子对象。 因此，最简单的修复方法是添加：在没有内容的情况下添加：after并清除float

或者您可以简单地：

#outer-div {
   display: inline-block;
}

演示：

或

演示：

您有典型的父级折叠问题，您可以在此处进一步阅读：

（读《大崩塌》

你应该读这个：这个：还有这个：这也解释了你的问题，并展示了很多解决方法。

#outer-div {
   display: inline-block;
}

#outer-div {
   overflow: auto;
}