保證金在一個div與浮動

Question

我混淆了把margin-top在我的div#q，它也影響div#m。

我只是想讓它們分開，div#m將在最上面，div#q在最下面，它們之間有一個空格。

我試過這種方法，但我失敗了，有沒有人有我的代碼的建議？

我有這個網站：

<div id="m"> 
    <div id="c" style="background:red;"> 
     <h3>test 1 </h3> 
     <ul> 
      <li>asd</li> 
      <li>asds</li> 
      <li>asd</li> 
     </ul> 
    </div> 
     <div id="c" style="background:blue;"> 
     <h3>test 2 </h3> 
     <ul> 
      <li>asd</li> 
      <li>asds</li> 
      <li>asd</li> 
     </ul> 
    </div> 
    <div id="c" style="background:yellow;"> 
     <h3>test 3 </h3> 
     <ul> 
      <li>asd</li> 
      <li>asds</li> 
      <li>asd</li> 
     </ul> 
    </div> 
    <div id="c" style="background:green;"> 
     <h3>test 4 </h3> 
     <ul> 
      <li>asd</li> 
      <li>asds</li> 
      <li>asd</li> 
     </ul> 
    </div> 

</div> 
<div id="q" style="background:violet;"> 
</div> 

CSS：

#m{ 
    width :400px; 
} 
#c{ 
    width:33.33%; 
    float : left; 
} 
#q{ 
    width: 300px; 
    height : 200px; 
    margin-top: 20px; 
} 

Answer 1

清除你的花車。例如與overflow: hidden - DEMO

#m{ 
    width: 400px; 
    overflow: hidden; 
} 

另外不要忘記，id -s應該獨特。如果您需要將相同樣式應用於多個元素，請改爲使用class。