浮动元素旁边的 margin-top 出现意外结果

Question

我遇到了这样的布局问题：

.wrapper {
  clear: both;
  background-color: #ccc;
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  width: 100px;
  float: left;
  background: lightblue;
}

.main {
  margin-left: 100px;
  background: lightgreen;
}

<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="box">top</div>
  </div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

.main 和 .side 元素需要对齐。正如您在上面的 sn-p 中看到的，一切都很好，除非 .top 元素没有高度，在这种情况下 margin-top 规则会导致它们倾斜。以下所有“修复”问题，但每个都有一个缺点：

• 为.wrapper添加边框（我可能可以使用透明边框，但我真的不喜欢这样，因为它感觉像一个肮脏的黑客，我宁愿不添加边框。出于某种原因边框需要有至少 1px 的宽度，否则这不起作用）

.wrapper {
  clear: both;
  background-color: #ccc;
  border: 1px solid #000;
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  width: 100px;
  float: left;
  background: lightblue;
}

.main {
  margin-left: 100px;
  background: lightgreen;
}

<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

• 将overflow: hidden 添加到.wrapper（这会隐藏某些元素的一部分并导致其他元素落入错误的位置）
• 将overflow: auto 添加到.wrapper（这在某些情况下会添加滚动条）

最后两个在我的 sn-p 中并不明显，但在现实世界的应用程序中，它们会导致问题，如 here 所述。

我强烈怀疑该问题与Why doesn't the height of a container element increase if it contains floated elements? 和CSS container doesn't stretch to accommodate floats 有关，但我已经尝试了许多这些建议，但似乎没有一个可以完全解决问题 - 可能是因为我的一个 div 是浮动的，而另一个是不是。

由于这是一个大型应用程序的一部分，我不想彻底改变布局，只要有一些 CSS 将保持 .main 和 .side 对齐，而不管这些元素之前的内容如何。

Answer 1

您可以将主元素设为inline-block 并使用 calc 设置宽度。这应该不会对您的布局产生太大影响，并且您会得到正确的输出：

.main {
  width:calc(100% - 100px);
  display:inline-block;
  background: lightgreen;
}

完整代码：

.wrapper {
  background-color: #ccc;
  clear: both;
}
.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  width: 100px;
  float: left;
  background: lightblue;
}

.main {
  width:calc(100% - 100px);
  display:inline-block;
  background: lightgreen;
}

<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="box">top</div>
  </div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

---

另一个 hacky 想法是确保您的顶部元素永远不会为空：

.top:empty {
  font-size:0;
}
.top:empty::before {
  content: "\80"; /* a random character */
}

完整代码

.wrapper {
  background-color: #ccc;
  clear: both;
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  width: 100px;
  float: left;
  background: lightblue;
}

.main {
  margin-left: 100px;
  background: lightgreen;
}

.top:empty {
  font-size:0;
}
.top:empty::before {
  content: "\80"; /* a random character */
}

<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="box">top</div>
  </div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

---

您也可以考虑相同的技巧，但在主包装器上使用伪元素：

.wrapper::before {
  content: "\80"; /* a random character */
  display:block;
  font-size:0;
}

完整代码

.wrapper {
  background-color: #ccc;
  clear: both;
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  width: 100px;
  float: left;
  background: lightblue;
}

.main {
  margin-left: 100px;
  background: lightgreen;
}

.wrapper::before {
  content: "\80"; /* a random character */
  display:block;
  font-size:0;
}

<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="box">top</div>
  </div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

---

您还可以使包装器inline-block 的宽度等于 100%，它的行为几乎与块元素相同：

.wrapper {
  background-color: #ccc;
  display:inline-block;
  width:100%;
  vertical-align:top; /* avoid some unwanted white space issue*/
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  width: 100px;
  float: left;
  background: lightblue;
}

.main {
  margin-left: 100px;
  background: lightgreen;
}

<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="box">top</div>
  </div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

---

为了解释，您正面临the specification 中所述的边距折叠问题：

两个边距相邻当且仅当：

• 两者都属于参与相同块格式化上下文的流入块级框
• 没有线框，没有间隙，没有填充，也没有边框将它们分开（请注意，出于此目的，某些零高度线框（请参阅 9.4.2）会被忽略。）
• 两者都属于垂直相邻的盒子边缘，即形成以下之一：
  • 框的上边距及其第一个流入子元素的上边距

Answer 2

您可以使用网格更优雅地做到这一点。这是网格代码：

.wrapper {
    display: grid;
    grid-template-areas:
        "top top"
        "side main";
    grid-template-columns: 100px 1fr;
}

.top{grid-area:top}
.side{grid-area:side}
.main{grid-area:main}

请注意我能够注释掉多少其他元素并仍然保持所需的布局。

.wrapper {
  /*clear: both;*/
  background-color: #ccc;
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  /*margin-top: 20px;*/
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  /*width: 100px;
  float: left;*/
  background: lightblue;
}

.main {
  /*margin-left: 100px;*/
  background: lightgreen;
}

.wrapper {
    display: grid;
    grid-template-areas:
        "top top"
        "side main";
    grid-template-columns: 100px 1fr;
}

.top{grid-area:top}
.side{grid-area:side}
.main{grid-area:main}

<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="box">top</div>
  </div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>