Question

我有50％的divs并排。在我有一个内容div我已经应用了保证金前60px。该保证金无效。

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

的CSS

.sbs50
{
    float: left;
    width: 50%;
}

.content-section
{
    margin-top: 60px;
    border: 1px solid green;
}

我尝试添加以下内容但无效

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

如何修复保证金不起作用？

这是我的fiddle

Answer 1

只需将边距添加到sbs50类的底部，然后清除.content-section类的浮点数。像这样：

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

See fiddle

<强>替代：

使用典型的clear方法，基本上你添加一个清除每个浮点数的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>

和你的CSS一样：

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

See fiddle for this example

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

Answer 2

这有效：

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

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

下一个div的保证金不适用于div上面的浮动

2 个答案: