css - 带浮动的 div 中的边距

Question

我在放入时感到困惑margin-top，div#q它也影响了div#m.

我只是希望它们分开，div#m将在顶部和div#q底部，它们之间有一个空间。

我尝试了这种方法，但失败了，有人对我的代码有建议吗？

我有这个 html：

<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改用。