html - 如何在没有额外标记的情况下清除 float div 后的 block 元素？

Question

我有两个 float 的 div，在它们之后我有一个带有 margin-top 的 block 元素。不幸的是，margin-top 由于 float 而不起作用。是否可以在代码中添加 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>