2 div彼此相邻进入下一个div

Question

所以，我有一个问题，我似乎无法找到解决方案。我知道，这是一件可笑容易，但我还是一个菜鸟...

每当我用命令float:left，跨越下一格这2个.con-icon和#con-info运行名为#test（一种颜色暗红色）。但我需要他们留在#contain边界内。

这是代码：http://jsfiddle.net/3eoj06b3/。

<section id="contain"> 
    <h1>Contain</h1> 
    <div id="con-info"> 
     <div class="con-icon"> 
      <h2>1</h2> 
      <h2>1</h2> 
      <h2>1</h2> 
     </div> 
     <p>2</p> 
     <p>2</p> 
     <p>2</p> 
    </div> 
    <div id="test"></div> 
</section> 

CSS是在链路

我在做什么错？

Answer 1

添加到您的CSS：

#con-info:after { 
    content: " "; 
    display: block; 
    clear: both; 
} 

Answer 2

只需将overflow:auto;行添加到您的#con-info类。 http://jsfiddle.net/garsdubh/。这会让你的父母元素意识到其漂浮的儿童高度。

Answer 3

使用overflow: hidden上#con-info。由于您已为#con-info宣布height: auto，因此您需要隐藏overflow以便具有自动高度。

DEMO

#con-info { 
    overflow: hidden; /* This is added to your Fiddle */ 
    position:relative; 
    border:2px solid #C60; 
    width:40%; 
    height:auto; 
    margin-left:10%; 
}