Question

我有一个经典的问题，我的外部div没有任何高度，因为它的孩子都被漂浮了。我想知道是否有一个简单的修复（没有Javascript），以便我可以保持浮动子项的行为，同时让外部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/

OR

#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高度不会调整为浮动的孩子。因此，最简单的修复方法是添加：在没有内容并清除浮动之后。

一个有孩子的分区全部浮动：我如何让分区有足够的高度来遏制其子女？

2 个答案: