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之后清除块元素？

1 个答案: