如何在没有额外标记的情况下清除浮动 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>

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

How to clear a block element after floated divs without extra markup?

html

css

margin

css-float