如何在没有额外标记的情况下清除div浮动后的块元素？

Question

我有两个浮动div，在它们之后，我有一个margin-top的块元素。 不幸的是，由于浮动，上margin-top不起作用。 是否可以在代码中没有额外标记的情况下添加margin-top ？

我尝试了:after ，但没有帮助。

div {
    background-color: red;
}
#left {
    float: left;
    height: 100px;
    background-color: yellow;
}
#right {
    float: right;
    height: 100px;
    background-color: yellow;
}
#content {
    margin-top: 50px;
    height: 100px;
    clear: both;
}

#content:before {
    clear: both;
    content: "";
    display: table;
}

<div id="left">left</div>
<div id="right">left</div>
<div id="content">left</div>

 div { background-color: red; } #left { float: left; height: 100px; background-color: yellow; } #right { float: right; height: 100px; background-color: yellow; } #content { margin-top: 50px; height: 100px; clear: both; } #content:before { clear: both; content: ""; display: table; } 

 <div id="left">left</div> <div id="right">left</div> <div id="content">left</div> 

Answer 1

哦，利润率下降了...

如果将最后一个div的顶部边距更改为顶部两个div的底部边距，它将按预期工作。

 div { background-color: red; } #left { float: left; height: 100px; background-color: yellow; margin-bottom: 50px; } #right { float: right; height: 100px; background-color: yellow; margin-bottom: 50px; } #content { height: 100px; clear: both; } 

 <div id="left">left</div> <div id="right">right</div> <div id="content">content</div>