一个带孩子的Div的孩子都漂浮了：如何使Div的高度足以容纳其孩子？

Question

我有一个经典的问题，我的外部div没有高度，因为它的所有子项都浮动了。 我想知道是否有一个简单的修复程序（没有Java脚本），这样我可以保留浮动子代的行为，同时使外部div具有高度（以便内部div周围有边框）。

这是概述问题的小提琴： http : //jsfiddle.net/2fn73ck1/

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>

Answer 1

或者您可以简单地：

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

演示： http ： //jsfiddle.net/xp10xdq0/1/

要么

#outer-div {
   overflow: auto;
}

演示： http ： //jsfiddle.net/xp10xdq0/

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

http://css-tricks.com/all-about-floats/ （阅读《大崩溃》）

Answer 2

#outer-div:after { content: " "; 
    display: block; 
    clear: both;} 

家长Div的身高无法适应流浪的孩子。 因此，最简单的解决方法是在没有内容的情况下添加：after并清除浮点数。