有孩子都浮動的Div：我如何讓孩子有足夠的高度來控制孩子？

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;} 

家長股利高度不`噸適應浮動的孩子。 因此，最簡單的解決方法是添加：在沒有內容並清除浮動之後。