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