需要在浮动div之间创建分隔，但在添加边距时不断打破它们

Question

我正在使用bootstrap并尝试将三个div放在一起，然后在它们之间添加一些分隔。当我尝试添加任何边距时，div会破坏并在彼此之下崩溃。

如果这涉及到使用clearfix，你能解释一下并帮我解决吗？

这是代码......谢谢：）

.quick-fact-boxes {

    #quick-fact-box-one {
        height: 500px;
        background: #34495e;
        float: left;
    }

    #quick-fact-box-two {
        height: 300px;
        background: #bdc3c7;
        float: left;
    }

    #quick-fact-box-three {
        height: 200px;
        background: #95a5a6;
        float: left;
    }
}

<div class="quick-fact-boxes container">
    <div class="row">
        <div class="col-md-5 boxes" id="quick-fact-box-one"></div>
        <div class="col-md-7 boxes" id="quick-fact-box-two"></div>
        <div class="col-md-7 boxes" id="quick-fact-box-three"></div>
    </div>
</div>

Answer 1

当你使用bootstrap时，你不需要在CSS中添加float和margin，你只需要在HTML中使用正确的类

<div class="quick-fact-boxes container">
<div class="row">
    <div class="col-md-4 boxes" id="quick-fact-box-one"></div>
    <div class="col-md-4 boxes" id="quick-fact-box-two"></div>
    <div class="col-md-4 boxes" id="quick-fact-box-three"></div>
</div>
</div>