Css 下一个div的保证金与浮动在div上方的不起作用

我有一个并列的50%的div。在我的目录下有一个content div，我在其中应用了最高60像素的边距。这一差距不起作用

<div class="sbs50">
    Left Side
</div>
<div class="sbs50">
    Right Side
</div>
<div class="content-section">
    Content Section
</div>

我尝试添加以下内容，但不起作用

.sbs50:after 
{
    content:'';
    display:block;
    clear: both;
}

我怎样才能解决保证金不起作用的问题

---

这是我的

只需在

sbs50

类的底部添加边距，并清除

内容部分

类的浮动。像这样：

.sbs50 {
    float: left;
    width: 50%;
    margin-bottom:50px;
}
.content-section {
    border: 1px solid green;
    display:block;
    clear: both;
    float:none;
    background:#ccc;
}

备选方案：

使用典型的清除方法，基本上是添加一个清除每个浮点的div。因此，您的HTML如下所示：

<div class="sbs50">Left Side</div>
<div class="sbs50">Right Side</div>
<div class="clearfix"></div><!-- added div -->
<div class="content-section">Content Section</div>

.sbs50 {
    float: left;
    width: 50%;
}
.clearfix {
    display:block;
    clear: both;
    float:none;
}
.content-section {
    border: 1px solid green;
    margin-top:200px;
    background:#ccc;
}

这是一种更常见的方法，因为您只需清除元素，然后根据需要设置后续元素的样式，但您可以使用这些方法中的任何一种，它们都同样有效

此方法有效：

.content-section {
    margin-top: 20px;
    border: 1px solid green;
    float: left;
    width: 100%;
}

但是我不确定你是否想自己设置宽度

.content-section {
    margin-top: 20px;
    border: 1px solid green;
    float: left;
    width: 100%;
}